CSS是一種用于網頁排版和樣式設計的語言，而水波按鈕則是CSS設計中比較常見的一種效果。所謂水波按鈕，就是在點擊按鈕時，按鈕會出現一圈水波紋的效果，非常炫酷。

.btn {
position: relative;
display: inline-block;
padding: 12px 24px;
border-radius: 4px;
color: #fff;
background-color: #4CAF50;
text-align: center;
font-size: 16px;
cursor: pointer;
overflow: hidden;
}
.btn::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 0;
background-color: rgba(255, 255, 255, 0.3);
border-radius: 100%;
transform: translate(-50%, -50%);
}
.btn:focus::after {
animation: ripple 0.8s linear;
}
@keyframes ripple {
to {
width: 200%;
padding-bottom: 200%;
opacity: 0;
}
}

其中，.btn類是我們定義的按鈕樣式，::after是用來添加水波效果的偽類。在點擊.btn按鈕時，::after偽類就會觸發ripple動畫，讓水波紋效果逐漸擴散，最后消失。

使用水波按鈕可以為你的網站增添一份特別的效果，讓用戶操作更為舒適自然。歡迎大家在自己的CSS設計中嘗試使用水波按鈕效果。