CSS按鈕是網頁設計中非常重要的元素之一，不同的按鈕樣式能夠產生不同的視覺效果和交互體驗。其中，凹陷按鈕是一種常見的按鈕樣式，具有較強的立體感，能夠讓按鈕看起來更為實用。本文將介紹如何使用CSS實現凹陷按鈕樣式。

.button {
padding: 10px 20px;
background-color: #f00;
color: #fff;
border: none;
box-shadow: 0 5px #56B4EF;
transition: box-shadow .2s ease-in-out;
}
.button:active {
box-shadow: 0 2px #56B4EF;
transform: translateY(3px);
}

首先，我們需要創建一個按鈕元素，并為其添加樣式。在以上代碼中，我們定義的是一個名為“button”的類，寬高為自適應，背景顏色為紅色，字體顏色為白色，邊框為無。然后，在按鈕上添加了一層陰影效果，使其看起來更為立體。

接下來，我們需要為按鈕添加交互效果，即在按鈕被點擊時出現“按下去”的效果。在以上代碼中，我們使用了偽類選擇器“:active”，并在其中添加了一個位移動畫，將按鈕往下移動3個像素，并同時改變陰影效果的大小。通過這樣的操作，我們可以讓按鈕在被點擊時產生一定的反饋效果，提升用戶體驗。

通過以上樣式的設置，我們就成功實現了一個簡單的CSS凹陷按鈕。在實際應用中，我們可以根據需要進行適當的調整，如改變按鈕的顏色、大小、陰影等效果，使其更符合實際需求。