在網站設計中，按鈕常常被用作交互的重要元素之一。而隨著越來越多的網站采用交互設計，按鈕在點擊的時候，漸變、縮放或者彈出等動畫效果也開始越來越受歡迎。

要實現這些按鈕動畫效果，CSS 起到了關鍵作用。下面我們來看一個實現 CSS 手機按鈕動畫的例子。

.btn {
display: inline-block;
padding: 10px 20px;
border: 1px solid #666;
font-size: 16px;
font-weight: bold;
position: relative;
overflow: hidden;
transition: all 0.3s ease;
cursor: pointer;
}
.btn:before {
content: '';
width: 0%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background: #3f51b5;
transition: all 0.3s ease;
z-index: -1;
}
.btn:hover:before {
width: 100%;
}

在上述代碼中，我們定義了一個.button 類。其中使用了 before 偽元素來定義動畫效果。由于 before 元素默認是在 button 元素的上面，所以我們需要給 before 設定 z-index:-1 使其在 button 元素下面。

除此之外，我們還給 button 元素定義了 overflow:hidden 屬性，來防止 before 元素在動畫動過程中溢出。而最后一行的 cursor:pointer 屬性則是為按鈕定義手型光標。

在 hover 時，我們將 before 的寬度設為 100% ，則可以形成從左到右的顏色漸變過程。效果如下：


通過這樣的效果，我們可以更加生動地呈現用戶點擊交互的過程，讓頁面更加生動。