CSS凹凸按鈕是一個常見的UI設計元素，它能夠為網頁添加豐富的視覺效果和交互功能。在本文中，我們將學習如何使用CSS實現一個簡單的凹凸按鈕效果。

.button {
display: inline-block;
padding: 10px 20px;
background-color: #007bff;
color: #fff;
border: none;
cursor: pointer;
box-shadow: 0 3px 0 #0069d9;
transition: all 0.2s ease-in-out;
}
.button:hover {
box-shadow: 0 5px 0 #0062cc;
top: 2px;
}

首先，我們創建了一個具有一定樣式的按鈕元素，這包括背景色、文本顏色、邊框等。然后，我們在按鈕上添加了一個陰影效果，以模擬按鈕凸起的效果。

接下來，我們使用transition屬性來定義按鈕的過渡效果，使得按鈕在鼠標懸浮時能夠平滑地過渡到新的樣式狀態。

最后，我們使用:hover偽類，定義了鼠標懸浮在按鈕上時的新樣式。在這個新樣式中，我們將陰影的位置調整了一下，并且添加了一個簡單的動畫效果。

這就是CSS凹凸按鈕的基本實現方法。您可以根據實際場景和需求進行調整和改進，創造出更加豐富和有趣的按鈕樣式。