在網頁設計中，開關按鈕是一種非常實用的組件。它可以用來切換頁面元素的狀態，比如顯示或隱藏某些內容，啟用或禁用某些功能。而使用CSS開關按鈕可以讓網頁設計更加美觀、靈活、易用。下面就來介紹一下CSS開關按鈕的用法。

<label class="switch">
<input type="checkbox" checked>
<span class="slider round"></span>
</label>

上面的代碼包含了一個label標簽和一個input標簽，input標簽的type屬性為checkbox，表示它是一個復選框。同時，label標簽中套了一個span標簽，用作開關按鈕。注意，input標簽要放在span標簽前面，這樣才能使開關按鈕在點擊時切換狀態。

.switch {
position: relative;
display: inline-block;
width: 60px;
height: 34px;
margin: 5px;
}
.switch input {
opacity: 0;
width: 0;
height: 0;
}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
transition: .4s;
border-radius: 34px;
}
.slider:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
transition: .4s;
border-radius: 50%;
}
input:checked + .slider {
background-color: #2196F3;
}
input:focus + .slider {
box-shadow: 0 0 1px #2196F3;
}
input:checked + .slider:before {
transform: translateX(26px);
}

上面的代碼包括了一系列CSS樣式，用于定義開關按鈕的外觀和交互效果。其中，.switch類定義了開關按鈕的基本樣式，包括位置、大小、邊距等屬性；.slider類定義了開關按鈕的滑塊，包括位置、顏色、過渡效果等屬性；:before偽類用于生成滑塊的圓形按鈕，并定義了其位置和大小；input:checked選擇器用于控制開關按鈕的選中狀態，改變背景顏色和按鈕位置。

通過以上HTML結構和CSS樣式，我們就可以得到一個完整的CSS開關按鈕，代碼效果如下：

若想改變按鈕的初始狀態（打開或關閉），只需刪除或添加input標簽的checked屬性即可。

總的來說，CSS開關按鈕的使用非常簡單，只需根據上述方法設置HTML結構和CSS樣式，并將它們應用到網頁相應的位置即可。這種按鈕的優點在于可以根據需要自定義外觀和交互方式，同時不需要使用JS代碼實現，可以極大地優化網頁性能，提高用戶體驗。