純CSS實現(xiàn)開關按鈕切換效果簡潔易用

segmentfault 發(fā)布時間：2023-10-11 14:33:58 作者：Winn

這篇文章主要為大家介紹了純CSS實現(xiàn)開關按鈕切換效果簡潔易用，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪

效果圖預覽

完整代碼如下

<!DOCTYPE html>
<html>
<head>
<title>純css編寫開關按鈕點擊切換</title>
<style type="text/css">
    #toggle-button{ 
        display: none; 
    }
    .button-label{
        position: relative;
        display: inline-block;
        width: 80px;
        background-color: #ccc;
        border: 1px solid #ccc;
        border-radius: 30px;
        cursor: pointer;
    }
    .circle{
        position: absolute;
        top: 0;
        left: 0;
        width: 30px;
        height: 30px;
        border-radius: 50%;
        background-color: #fff;
    }
    .button-label .text {
        line-height: 30px;
        font-size: 18px;
        /*
        用來阻止頁面文字被選中，出現(xiàn)藍色
        可以將下面兩行代碼注釋掉來查看區(qū)別
        */
       -webkit-user-select: none;
       user-select: none;
    }
    .on { 
        color: #fff; 
        display: none; 
        text-indent: 10px;
    }
    .off { 
        color: #fff; 
        display: inline-block; 
        text-indent: 53px;
    }
    .button-label .circle{
        left: 0;
        transition: all 0.3s;/*transition過度，時間為0.3秒*/
    }
    /*
    以下是checked被選中后，緊跟checked標簽后面label的樣式。
    例如：div+p 選擇所有緊接著<div>元素之后的<p>元素
    */
    #toggle-button:checked + label.button-label .circle{
        left: 50px;
    }
    #toggle-button:checked + label.button-label .on{ 
        display: inline-block; 
    }
    #toggle-button:checked + label.button-label .off{ 
        display: none; 
    }
    #toggle-button:checked + label.button-label{
        background-color: #33FF66;
    }
</style>
</head>
<body>
    <input type="checkbox" id="toggle-button">
   <!--label中的for跟input的id綁定。作用是在點擊label時選中input或者取消選中input-->
    <label for="toggle-button" class="button-label">
        <span class="circle"></span>
        <span class="text on">開</span>
        <span class="text off">關</span>
    </label>
</body>
</html>

知識點

1. label中的for跟input的id綁定。作用是在點擊label時選中input或者取消選中input

2. (:checked + 緊鄰其后面標簽) 的選擇器。例如：#toggle-button:checked + label 解釋：當id為toggle-button的checked為選中狀態(tài)時，就選擇緊鄰其后的label標簽

3. user-select: none;這個屬性用來阻止頁面文字被選中，如果不添加此屬性，點擊切換開關時，開/關二字有時候會被選中，出現(xiàn)藍色背景，如下圖：

以上就是純css編寫開關按鈕點擊切換效果實現(xiàn)的詳細內(nèi)容，更多關于css開關按鈕點擊切換的資料請關注腳本之家其它相關文章！

Tag：css 開關按鈕點擊開關切換

純CSS3代碼實現(xiàn)switch滑動開關按鈕效果
今天小編給大家?guī)硪粋€小demo，使用純css3代碼實現(xiàn)switch滑動開關按鈕效果，非常實用，感興趣的朋友可以參考下
2016-08-30
使用CSS3編寫類似iOS中的復選框及帶開關的按鈕
這篇文章主要介紹了使用CSS3編寫類似iOS中的復選框及帶開關的按鈕,需要的朋友可以參考下
2016-04-11
使用CSS實現(xiàn)按鈕邊緣跑馬燈動畫
這篇文章主要介紹了使用CSS實現(xiàn)按鈕邊緣跑馬燈動畫,技術上只使用了css+html,還是非常容易學習的，文中提供了詳細的代碼,需要的朋友可以參考下
2023-04-28
36種漂亮的CSS3網(wǎng)頁按鈕Button樣式(主要結合before與after)
這篇文章主要介紹了36種漂亮的CSS3網(wǎng)頁按鈕Button樣式，主要結合before與after,需要的朋友可以參考下
2023-03-25
基于css實現(xiàn)炫酷按鈕動畫效果案例代碼
按鈕在開發(fā)中使用的頻率非常的高，ui 框架中的按鈕組件也都是層出不窮，今天教大家僅用 css 實現(xiàn)一些非常炫酷的按鈕效果，感興趣的朋友跟隨小編一起學習吧
2023-02-28
使用 CSS 輕松實現(xiàn)一些高頻出現(xiàn)的奇形怪狀按鈕
本文基于一些高頻出現(xiàn)在設計稿中的，使用 CSS 實現(xiàn)稍微有點難度和技巧性的按鈕，講解使用 CSS 如何盡可能的實現(xiàn)它們，讓我們一起看看使用 CSS 輕松實現(xiàn)一些高頻出現(xiàn)的奇形
2021-12-01
使用CSS3實現(xiàn)按鈕懸停閃爍動態(tài)特效代碼
這篇文章主要介紹了使用CSS3實現(xiàn)按鈕懸停閃爍動態(tài)特效,代碼簡單易懂，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下
2021-08-25
CSS3 實現(xiàn)的圖片懸停的切換按鈕
這篇文章主要介紹了CSS3 實現(xiàn)的圖片懸停切換效果，幫助大家更好的理解和學習使用CSS3，感興趣的朋友可以了解下
2021-04-13
CSS3 制作的彩虹按鈕樣式
這篇文章主要介紹了CSS3 制作的彩虹按鈕樣式，幫助大家更好的理解和學習使用CSS3制作特效，感興趣的朋友可以了解下
2021-04-09
CSS3點擊按鈕圓形進度打鉤效果的實現(xiàn)代碼
這篇文章主要介紹了CSS3點擊按鈕圓形進度打鉤效果的實現(xiàn)代碼,代碼簡單易懂，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下
2021-03-30