CSS三維按鈕是一種在Web頁面中常見的交互元素，給用戶提供了一種類似于物理按鈕的交互體驗。下面我們來一步步學習如何創建一個簡單的CSS三維按鈕。

.button {
width: 120px;
height: 40px;
padding: 10px 20px;
font-size: 16px;
text-align: center;
text-transform: uppercase;
border: none;
border-radius: 5px;
box-shadow: 0 5px 0 #175e9a;
color: white;
background: linear-gradient(#1e87d9, #155e8b);
position: relative;
transition: all 0.3s ease-in-out;
transform-style: preserve-3d;
}
.button:before {
content: "";
position: absolute;
top: -5px;
left: -5px;
right: -5px;
bottom: -5px;
border-radius: 10px;
background: rgba(0, 0, 0, 0.3);
transform: translateZ(-1px);
}
.button:active {
box-shadow: none;
top: 5px;
transform: translate3d(0, 3px, -1px);
}
.button:active:before {
top: -15px;
left: -15px;
right: -15px;
bottom: -15px;
box-shadow: 0 15px 0 rgba(0, 0, 0, 0.3) inset;
transform: translateZ(-2px);
}

首先我們創建一個基本的按鈕樣式，設置寬高、字體大小、邊框圓角、陰影、背景顏色等屬性。接下來，我們需要為按鈕添加一個：before偽元素，用來模擬陰影效果。

然后，我們為按鈕添加一個：active偽類，當用戶點擊按鈕時，改變陰影、位置和角度等屬性，從而實現三維效果。

在這個例子中，我們使用了三維變換屬性（translate3d和translateZ）來改變按鈕的位置和角度，使其在Z軸上移動，從而呈現出立體效果。

通過上述代碼，我們可以創建一個非常簡單的CSS三維按鈕。當然，如果你想要更復雜的效果，可以繼續學習三維變換、透視和過渡等屬性，從而創造出更震撼的按鈕效果。