CSS是前端開發中非常重要的技術，可以用于實現多種互動效果。在這篇文章中，我們將講解如何使用CSS實現按鈕兩側動畫效果。

.button{
position: relative;
display: inline-block;
padding: 10px 20px;
background-color: blue;
color: white;
text-transform: uppercase;
font-size: 16px;
border: none;
cursor: pointer;
}
.button::before{
content: "";
position: absolute;
width: 50%;
height: 100%;
background-color: red;
top: 0;
left: -50%;
transform: skewX(-30deg);
transition: all 0.4s ease-in-out;
}
.button::after{
content: "";
position: absolute;
width: 50%;
height: 100%;
background-color: red;
top: 0;
right: -50%;
transform: skewX(30deg);
transition: all 0.4s ease-in-out;
}
.button:hover::before{
left: 0;
transform: skewX(-10deg);
}
.button:hover::after{
right: 0;
transform: skewX(10deg);
}

首先，我們需要創建一個按鈕元素，設置它的樣式，包括邊距、背景顏色等等。然后，在按鈕元素的偽元素before和after中，我們設定了它們的樣式，使它們分別出現在按鈕的左右兩側，并且處于按鈕的底層。

為了實現兩側的動畫效果，我們需要在偽元素的樣式中添加一個過渡屬性。同時，我們為按鈕的偽元素before和after中的樣式設定了一些較為特殊的屬性，如transform和skewX等。

在鼠標懸停在按鈕上時，我們為偽元素的before和after中的left和right屬性賦值為0，同時對它們的transform屬性進行調整（改變傾斜角度），實現了兩側從底下滑上的動畫效果。

最終的效果非常酷炫，可以吸引用戶的眼球，提高頁面的交互體驗。在實際使用中，還可以根據需要對相關的CSS樣式進行調整，來實現更具有個性化的按鈕動畫效果。