在Web前端開發中，按鈕設計與實現一直是一個重要的話題。在傳統的Web頁面中，我們通常使用顏色、圓角、邊框等方式讓按鈕顯示出來。但是，如果需要更多的視覺效果，我們還可以使用CSS來實現按鈕下凹效果。

.button {
position: relative;
display: inline-block;
padding: 0.5em 1em;
background-color: #3c9eff;
color: #fff;
border-radius: 4px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
transition: transform 0.2s ease;
}
.button:active {
transform: translateY(2px);
box-shadow: none;
}

上述代碼使用了CSS3的transition和box-shadow屬性。在按鈕的正常狀態下，box-shadow屬性為按鈕添加了一層陰影，讓按鈕看起來更加立體。在按鈕被點擊時，我們利用:active偽類，將按鈕下移2像素，并去掉陰影，營造出按鈕被按下的效果。

此外，我們也可以設定不同的按鈕樣式來實現多種下凹效果。例如，我們可以在按鈕被點擊時改變按鈕的背景顏色和字體顏色。

.button2 {
position: relative;
display: inline-block;
padding: 0.5em 1em;
background-color: #3c9eff;
color: #fff;
border-radius: 4px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
transition: transform 0.2s ease;
}
.button2:active {
transform: translateY(2px);
box-shadow: none;
background-color: #1e8ce0;
color: #f2f2f2;
}

以上就是CSS實現按鈕下凹效果的基本介紹，希望大家能夠在設計和實現按鈕時多加嘗試，為Web頁面增添更多趣味和效果。