CSS實現(xiàn)按鈕漣漪動畫的方式有很多，這里介紹一種簡單易懂的方法。我們可以通過偽元素和動畫來創(chuàng)建按鈕的漣漪效果。

.button {
position: relative;
display: inline-block;
padding: 12px 30px;
font-size: 18px;
color: #fff;
background-color: #007aff;
border-radius: 5px;
text-align: center;
cursor: pointer;
}
.button::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 0;
height: 0;
background-color: rgba(255, 255, 255, 0.5);
border-radius: 100%;
opacity: 0;
}
@keyframes ripple {
to {
width: 200%;
padding-bottom: 200%;
opacity: 0;
}
}
.button:hover::after {
animation: ripple 1s ease-out forwards;
}

這段代碼實現(xiàn)了一個按鈕，當鼠標懸停在按鈕上時，會出現(xiàn)一個漣漪動畫。首先，我們?yōu)榘粹o添加了一個偽元素，在按鈕中心位置。偽元素的初始寬度和高度為0，不可見。當鼠標懸停在按鈕上時，我們應用了一個動畫效果，通過改變偽元素的寬度，高度和透明度，來實現(xiàn)漣漪效果。

需要注意的是，我們使用了position: relative來將按鈕和偽元素定位在同一層級中。通過position: absolute把偽元素相對于其容器位置偏移。我們還使用了translate(-50%, -50%)屬性來將偽元素水平和垂直居中。

這種簡單方法提供了一種方便的方式來增強按鈕的交互性。如果你想要更豐富多彩的效果，可以根據(jù)自己的需求進行更改和優(yōu)化。