CSS3動畫技術已經成為當前前端開發中必不可少的一部分，它能夠實現很多漂亮、時尚的動態效果。其中，純CSS3動畫按鈕是一種非常實用的效果。下面我們來談一談如何實現一個純CSS3動畫按鈕。

.button {
display: inline-block;
padding: 10px 20px;
background-color: #3498db;
color: #fff;
font-size: 16px;
border: 2px solid #3498db;
border-radius: 5px;
position: relative;
font-weight: bold;
text-decoration: none;
overflow: hidden;
}
.button::before {
content: "";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 0;
height: 0;
background-color: #fff;
border-radius: 50%;
opacity: 0.5;
transition: width 0.5s ease-out, height 0.5s ease-out, opacity 0.5s ease-out;
}
.button:hover::before {
width: 200%;
height: 200%;
opacity: 0;
}
.button:active {
top: 1px;
box-shadow: none;
}

這個動畫按鈕的實現主要是通過偽元素before來實現的。在按鈕hover時，before元素的高度和寬度分別變為了按鈕的兩倍，然后它會漸漸地消失。這里，我們使用transition屬性來實現過渡效果。

接下來是樣式部分的說明：

• 為了撐起before元素，并在居中對齊，需要設置position：relative和被before元素包含的overflow：hidden。
• button:active狀態可以增加button點擊后的微小效果。

當然，這只是一個簡單的動畫按鈕實現。前端開發人員還可以使用更多元素以及更多CSS屬性來實現更為多彩的動畫。