CSS按鈕水波紋是一個非常酷的效果，可以為網站增添一份活力。水波紋效果是指當鼠標懸停在按鈕上時，會產生擴散的漣漪效果。

.btn {
position: relative;
overflow: hidden;
display: inline-block;
padding: 12px 24px;
margin: 10px;
font-size: 16px;
font-weight: 500;
color: #fff;
background: #2db5cf;
border-radius: 5px;
cursor: pointer;
transition: background 0.3s ease;
z-index: 1;
}
.btn:hover {
background: #22a0b1;
transition: background 0.3s ease;
}
.btn:before {
content: "";
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: -1;
background: radial-gradient(circle, #fff 10%, transparent 10.01%);
background-size: 10px 10px;
background-position: center;
transform: scale(1, 1);
opacity: 0;
transition: transform 0.5s, opacity 1s;
}
.btn:active:before {
transform: scale(50, 50);
opacity: .25;
transition: transform 0s, opacity 0.5s;
}

上面的代碼是實現按鈕水波紋效果的關鍵。我們將按鈕的position設置為relative，并為其增加一個:before偽元素。然后，我們為偽元素設置一個圓形的漸變背景，這是實現波紋效果的關鍵。

在按鈕被激活時，我們會以漣漪的形式顯示出來，這里我們使用 CSS3 的 transform 屬性，使其水平垂直擴張并淡出。

總的來說， CSS按鈕水波紋效果是一種非常流行的 CSS 動畫效果，尤其是在開發響應式網站時，它可以非常好的增強用戶交互性。這種效果的實現并不困難，只要你掌握了基本的 CSS3 動畫和偽元素技術，就可以輕松制作出更加炫酷的效果，為自己的網站增添更多活力。