CSS按鈕點擊波紋是一種常用的交互效果，它能讓用戶在點擊按鈕的時候有一種視覺反饋，增強用戶體驗。下面是一個簡單的實現方法。

.btn {
position: relative;
display: inline-block;
padding: 12px 32px;
color: #fff;
font-size: 20px;
background-color: #0099cc;
border-radius: 5px;
overflow: hidden;
}
.btn:after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 0;
border-radius: 100%;
background-color: rgba(255, 255, 255, 0.3);
transform: translate(-50%, -50%);
opacity: 0;
}
.btn:focus:after, .btn:active:after {
width: 200%;
height: 200%;
opacity: 1;
transition: width 0.3s ease-out, height 0.3s ease-out, opacity 0.3s ease-out;
}

代碼中，我們首先定義了一個作為按鈕的樣式類 .btn，然后給它設置了一些基礎的樣式屬性。在按鈕上方增加一個偽元素 :after，用來代表波紋效果。我們將它絕對定位到按鈕中心，并設置寬高為0。

接著，我們為 .btn 的 focus 和 active 狀態設置波紋效果。當按鈕獲得焦點或者被點擊時，偽元素的寬高會變成按鈕的兩倍，透明度也變成1，從而形成了一個擴散的波紋效果。

利用這種方法，我們可以輕松地給按鈕添加波紋效果，從而提升用戶體驗，讓網站更加美觀動人。