CSS點擊波浪效果是一種酷炫的交互體驗，可以讓網站更加生動活潑。下面我們來學習一下如何實現這種效果。

.btn {
position: relative; /* 確保偽元素定位不脫離按鈕 */
background-color: #fff;
color: #333;
padding: 6px 12px;
font-size: 16px;
border: none;
border-radius: 5px;
cursor: pointer;
}
.btn::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
border-radius: inherit; /* 繼承按鈕的圓角 */
z-index: -1; /* 將偽元素置于按鈕下面 */
opacity: 0;
transition: opacity .3s ease-out; /* 設置過渡效果 */
background-image: linear-gradient(45deg, #008CBA, #673AB7); /* 設置背景漸變色 */
}
.btn:hover::before {
opacity: 0.3; /* 鼠標經過按鈕時顯示偽元素 */
}
.btn:active::before {
opacity: 0.5; /* 鼠標按下按鈕時顯示偽元素 */
}

以上代碼使用了偽元素before來實現點擊波浪效果。我們首先給按鈕添加一個漸變色背景，然后利用偽元素before的z-index設置，將其置于按鈕下面。通過控制偽元素的opacity，實現了鼠標經過和按下時的不同效果。

值得注意的是，我們使用了transition屬性來實現過渡效果，讓按鈕的交互更加自然流暢。