今天我們來學習一下如何給按鈕添加點擊時的陰影效果，讓你的頁面更加生動有趣。以下是代碼實現方法： 首先我們需要設置按鈕的默認樣式，包括按鈕的背景顏色、邊框、文字大小和顏色等等。代碼如下所示：

.button {
background-color: #007bff;
color: #fff;
border: none;
font-size: 16px;
padding: 10px 20px;
}

接下來，我們需要添加按鈕點擊時的陰影效果。我們可以使用CSS3中的box-shadow屬性來實現。代碼如下所示：

.button:active {
box-shadow: 0px 0px 10px 2px rgba(0, 0, 0, 0.5);
}

這段代碼的意思是，當按鈕被點擊時，給它添加一個陰影效果。具體來說，我們給按鈕添加了一個2px的擴展效果，陰影顏色為黑色，透明度為0.5。這將會使按鈕看起來更加明顯，并且能夠使用戶感受到按鈕被按下的反饋。 最后，我們來看一下完整的代碼實現：

.button {
background-color: #007bff;
color: #fff;
border: none;
font-size: 16px;
padding: 10px 20px;
}
.button:active {
box-shadow: 0px 0px 10px 2px rgba(0, 0, 0, 0.5);
}

以上就是按鈕點擊陰影效果CSS的實現方法。你可以根據自己的需求進行調整，來讓你的頁面更具吸引力。希望本篇文章能對你有所幫助。