按鈕是網頁設計中常用的重要元素，通過按鈕用戶可以與網站交互，提交表單、打開鏈接等等。而按鈕的交互效果則主要通過CSS實現。本文將介紹如何利用CSS實現按鈕點擊效果，首先是相關的HTML代碼：

<button class="btn">點擊我</button>

接下來，我們需要為按鈕設置相應的CSS樣式，以實現點擊效果。下面的CSS代碼將按鈕的默認樣式設為淡灰色背景，并添加了邊框樣式：

.btn {
background-color: #f2f2f2;
border: 1px solid #ddd;
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
}

接下來，我們需要添加hover效果，即鼠標懸停在按鈕上時的效果。下面的CSS代碼通過改變按鈕的背景色和邊框顏色實現了hover效果：

.btn:hover {
background-color: #ddd;
border: 1px solid #a2a2a2;
}

最后，我們需要添加點擊效果，讓按鈕在被點擊時顯示效果。下面的CSS代碼實現了點擊效果，通過給按鈕添加active class并改變背景色和邊框顏色實現：

.btn:active {
background-color: #a2a2a2;
border: 1px solid #333;
}

至此，我們完成了按鈕的點擊效果。完整的CSS代碼如下：

.btn {
background-color: #f2f2f2;
border: 1px solid #ddd;
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
}
.btn:hover {
background-color: #ddd;
border: 1px solid #a2a2a2;
}
.btn:active {
background-color: #a2a2a2;
border: 1px solid #333;
}

可以看到，我們通過設置hover和active的CSS效果，讓按鈕在用戶與網頁進行交互時更加生動，提升了用戶的體驗。