移動端的用戶體驗比電腦端更加重要，因為用戶需要通過手指進行操作。在移動端設計中，按鈕交互效果是非常關鍵的一部分。下面介紹一些移動端常見的css按鈕交互效果。

.btn {
display: inline-block;
padding: 12px 24px;
background-color: #52b7f9;
color: #fff;
border-radius: 4px;
text-align: center;
font-size: 16px;
transition: all 0.2s ease-in-out;
}
.btn:hover {
background-color: #3989ac;
cursor: pointer;
}
.btn:active {
outline: none;
transform: scale(0.95);
transition: all 0.2s ease-in-out;
box-shadow: 0px 10px 20px #00000029;
}

1. 鼠標懸浮交互效果

當用戶將鼠標懸浮在按鈕上時，通常會出現背景顏色、邊框和文字顏色等變化，以表明當前按鈕可以點擊。在移動端中，可以使用:hover偽類來實現類似的效果。

2. 點擊交互效果

在移動端中，用戶通常無法感受到鼠標懸浮交互效果。因此，點擊交互效果變得更加重要。用戶點擊按鈕時，按鈕應該有一個壓縮效果。按鈕按下時可以使用:active偽類并設置一定的縮放和陰影效果。這個效果可以給用戶一種按鈕在被按下的感覺，增加了用戶的操作感受。

在移動端設計中，為用戶提供良好的交互效果可以使用戶更容易理解應用程序的操作方式。以上是常見的兩種移動端css按鈕交互效果，可以根據具體情況進行選擇和設置。