在web開發中，立體開關按鈕是非常常見的UI組件之一。使用CSS可以輕松創建一個漂亮的開關按鈕，為網頁添加更加生動和交互的體驗。今天我們將學習如何使用CSS創建一個立體開關按鈕。

.switch-btn{
display: inline-block;
position: relative;
width: 60px;
height: 30px;
border-radius: 30px;
background-color: #ccc;
margin: 10px;
}
.switch-btn:before{
content: "";
position: absolute;
left: 0;
top: 0;
width: 50%;
height: 100%;
border-radius: 50%;
background-color: #fff;
box-shadow: 0 0 5px rgba(0,0,0,0.3);
transition: transform 0.3s ease;
}
.switch-btn:after{
content: "";
position: absolute;
right: 0;
top: 0;
width: 50%;
height: 100%;
border-radius: 50%;
background-color: #fff;
box-shadow: 0 0 5px rgba(0,0,0,0.3);
transition: transform 0.3s ease;
}
.switch-btn.on:before{
transform: translateX(30px);
}
.switch-btn.on:after{
transform: translateX(-30px);
}

以上代碼使用了:before和:after偽類來實現立體效果，并使用CSS3的transition屬性實現平滑過渡。當按鈕狀態為on時，通過改變:before和:after的transform屬性來移動開關，實現按鈕的切換。

在HTML中，可以通過添加switch-btn類來使用此樣式：

<div class="switch-btn"></div>

這樣，一個簡單的立體開關按鈕就完成了。你可以根據自己的需要進行更改樣式，并將其用于你的網站或應用程序中，給用戶帶來更好的體驗。