CSS3切換按鈕是一種常見的網頁設計元素，可讓用戶通過單擊按鈕在不同狀態之間切換。下面將介紹如何創建CSS3切換按鈕。

/* HTML代碼 */
<div class="togglebtn">
<input type="checkbox" id="toggle" name="toggle" class="togglebtn-checkbox">
<label for="toggle" class="togglebtn-label"></label>
</div>
/* CSS代碼 */
.togglebtn {
display: inline-block;
position: relative;
width: 60px;
height: 30px;
margin: 20px;
}
.togglebtn-checkbox {
display: none;
}
.togglebtn-label {
display: block;
position: absolute;
z-index: 1;
width: 100%;
height: 100%;
background-color: #ccc;
border-radius: 30px;
transition: background-color 0.3s ease;
}
.togglebtn-checkbox:checked + .togglebtn-label {
background-color: #008080;
}
.togglebtn-label:before {
content: "";
display: block;
position: absolute;
z-index: 2;
top: 2px;
left: 2px;
width: 26px;
height: 26px;
background-color: #fff;
border-radius: 50%;
transition: left 0.3s ease;
}
.togglebtn-checkbox:checked + .togglebtn-label:before {
left: 32px;
}

首先，在HTML中創建一個div元素，為其添加一個class屬性作為樣式選擇器。在div元素中，添加一個input元素作為開關按鈕的開關，并將其類型設置為“checkbox”。 接下來，使用label元素作為開關按鈕的標簽，將其屬性“for”指向開關按鈕的id。“togglebtn-checkbox”類用于隱藏復選框，而“togglebtn-label”類用于樣式開關按鈕。

在CSS中，將“togglebtn”樣式設置為內聯塊，設置其寬度和高度，并定位其位置。使用“togglebtn-checkbox”樣式隱藏復選框。設置“togglebtn-label”樣式，包括絕對定位、寬高、背景顏色、邊框半徑和過渡效果。使用“togglebtn-checkbox:checked + .togglebtn-label”樣式設置當復選框被選擇時的背景顏色。使用“togglebtn-label:before”樣式添加一個白色的圓形元素，作為開關按鈕。通過使用“togglebtn-checkbox:checked + .togglebtn-label:before”樣式，當復選框被選擇時將該元素移動到右側。

可根據需要更改CSS樣式，以創建自定義的CSS3切換按鈕。