CSS3切換按鈕是網(wǎng)頁設(shè)計(jì)中非常實(shí)用的一種元素，可以為網(wǎng)站增加交互性，提升用戶體驗(yàn)。下面我們來了解一下CSS3實(shí)現(xiàn)切換按鈕的方法。

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

首先我們創(chuàng)建一個(gè)包含開關(guān)的容器，并設(shè)置容器的寬度、高度、背景顏色和邊框圓角等樣式。接著我們?yōu)槿萜鞯膫卧豟::before`設(shè)定樣式，通過絕對(duì)定位和陰影效果創(chuàng)建白色背景的圓形按鈕，并通過`transition`屬性設(shè)置過渡效果。當(dāng)容器的class為`on`時(shí)，開關(guān)背景顏色變?yōu)榫G色，并通過`transform`將按鈕向右移動(dòng)；當(dāng)容器的class為`off`時(shí)，根據(jù)`::before`元素的translateX()屬性將按鈕移回至初始位置。接下來，我們只需要通過JS來控制頁面的切換效果即可。