CSS實現(xiàn)滑動開關按鈕，是網(wǎng)頁界面開發(fā)中常見的一種效果。通常用于控制網(wǎng)頁中某項功能，可以使用戶更方便地進行操作。本文將介紹如何使用CSS來實現(xiàn)滑動開關按鈕效果。

/*定義開關按鈕的基本樣式*/
.switch {
position: relative;
display: inline-block;
width: 60px;
height: 34px;
background-color: gray;
border-radius: 34px;
}
/*定義滑塊的樣式*/
.switch::after {
content: "";
position: absolute;
width: 26px;
height: 26px;
border-radius: 50%;
background-color: white;
top: 4px;
left: 4px;
transition: all 0.3s;
}
/*添加選中效果*/
.switch.on {
background-color: #2196F3;
}
.switch.on::after {
left: 30px;
}
/*設置鼠標懸停效果*/
.switch:hover {
cursor: pointer;
}
/*使用label標簽使得點擊文本也能切換開關*/
.switch input {
display:none;
}
.switch.on input:checked+::after{
left: 30px;
}
.switch input:checked+.off{
display:none;
}
.switch input:checked+.on{
display:inline-block;
}

以上代碼包含了基本的開關按鈕樣式以及選中、懸停效果，具備較好的兼容性。如果需要更多自定義效果，可以根據(jù)實際需求進行調(diào)整。