純CSS將Radio button美化與開關型整理(下)

上集我們先介紹了類似電源開關的ON和OFF按鈕基本款程式碼，而看完了基本款的橫向與縱向美化型態，接下來聊聊幾種不同的變化型。

還沒看上集嗎？
直接點選下方網址回顧上集教學吧！
連結：純CSS將Radio button美化與開關型整理(上)

這裡整理了三種不同樣式的變化型，先從單純只有左右和顏色辨別ON和OFF的種類開始，到文字在操作鈕上的版本。
通常我們操作時，使用習慣是操作鈕靠左為OFF；靠右為ON，當然，最好還能透過顏色區分進行識別。

直接來看各版本的最終呈現樣貌及程式碼吧！

內容目錄

Radio button變化型 – 無字大圓版

首先是無字大圓版本，先來看看最終結果會長這樣：

程式碼HTML如下：

<!-- HTML -->

<div class="cktoggle_bigbutton">
    <input type="checkbox" class="cktoggle_bigbutton_checkbox" id="cktoggle_bigbutton_id" checked>

    <label class="cktoggle_bigbutton_label" for="cktoggle_bigbutton_id">
        <span class="cktoggle_bigbutton_inner"></span>
        <span class="cktoggle_bigbutton_circle"></span>
    </label>
</div>

接著是CSS的部分：

/* CSS */

/* ************************
    大圓版本開始
************************ */

.cktoggle_bigbutton {
    position: absolute;
    width: 70px; /* 全按鈕寬度 */
    top: 170px;
    left: 50px;
}

/* 原按鈕樣式隱藏 */
.cktoggle_bigbutton_checkbox { 
    display: none;
}

/* 主外框 */
.cktoggle_bigbutton_label { 
    display: block;
    overflow: hidden;
    cursor: pointer;
    /* border: 2px solid #156812; */
    border-radius: 25px;
}

/* 背景 */
.cktoggle_bigbutton_inner { 
    display: block;
    width: 200%; /* 左+右背景總寬度 */
    margin-left: -100%; /* 左側及右側背景位置 一開始躲在左側100% */
    transition: margin 0.3s ease-in 0s;
}

    /* 背景 */
    .cktoggle_bigbutton_inner:before, .cktoggle_bigbutton_inner:after { 
        display: block;
        float: left;
        width: 50%; /* before和after各佔50% */
        height: 22px; /* 全按鈕高度 */
        line-height: 42px; /* ON OFF文字高度 */
        font-size: 16px;
        color: white;
        font-family: Trebuchet, Arial, sans-serif;
        font-weight: bold;
        box-sizing: border-box;
    }

    /* ON */
    .cktoggle_bigbutton_inner:before { 
        content: "";
        padding-left: 10px;
        background-color: #7fd293;
        color: #FFFFFF;
    }

    /* OFF */
    .cktoggle_bigbutton_inner:after { 
        content: "";
        padding-right: 10px;
        background-color: #EEEEEE;
        color: #999999;
        text-align: right;
    }

/* 上面的小圓 */
.cktoggle_bigbutton_circle { 
    display: block;
    width: 26px; /* 小圓寬度 */
    height: 26px; /* 小圓高度 */
    margin: 0px; /* 小圓距離上下左右margin */
    background-color: #10b736;
    position: absolute;
    top: -5px; /* 距離上邊緣 左右是和一開始的位置有關 */
    right: 50px; /* uncheck時 小圓移動到離右側距離XXpx位置 */
    border: 3px solid #2f8442; /* 小圓外框顏色 */
    border-radius: 100px;
    transition: all 0.3s ease-in 0s;
}

/* 當unchecked時，小圓顏色變換 */
.cktoggle_bigbutton_checkbox:not(:checked) + .cktoggle_bigbutton_label .cktoggle_bigbutton_circle {
    background-color: #ececec;
    border-color: #b7b7b7;
}

/* label和背景的移動 */
.cktoggle_bigbutton_checkbox:checked + .cktoggle_bigbutton_label .cktoggle_bigbutton_inner { 
    margin-left: 0;
}

/* label和上面小圓的移動 */
.cktoggle_bigbutton_checkbox:checked + .cktoggle_bigbutton_label .cktoggle_bigbutton_circle { 
    right: -10px;
}

/* ************************
   大圓版本結束
************************ */

Radio button變化型 – 方形版

再來同樣是左右，但將整個外框製作成圓角方形，並將操作鈕做成類似反光效果。

最終結果會長這樣：

程式碼HTML如下：

<！-- HTML -->

<div class="cktoggle_square">
    <input type="checkbox" class="cktoggle_square_checkbox" id="cktoggle_square_id" checked>

    <label class="cktoggle_square_label" for="cktoggle_square_id">
        <span class="cktoggle_square_inner"></span>
        <span class="cktoggle_square_circle"></span>
    </label>
</div>

CSS部分如下：

/* CSS */

/* ************************
    方形版本開始
************************ */

.cktoggle_square {
    position: absolute;
    width: 120px; /* 全按鈕寬度 */
    top: 280px;
    left: 50px;
}

/* 原按鈕樣式隱藏 */
.cktoggle_square_checkbox { 
    display: none;
}

/* 主外框 */
.cktoggle_square_label { 
    display: block;
    overflow: hidden;
    cursor: pointer;
    border: 3px solid #2d54ad;
    border-radius: 8px;
    transition: border 0.3s ease-in 0s;
}

/* 背景 */
.cktoggle_square_inner { 
    display: block;
    width: 200%; /* 左+右背景總寬度 */
    margin-left: -100%; /* 左側及右側背景位置 一開始躲在左側100% */
    transition: margin 0.3s ease-in 0s;
}

    /* 背景 */
    .cktoggle_square_inner:before, .cktoggle_square_inner:after { 
        display: block;
        float: left;
        width: 50%; /* before和after各佔50% */
        height: 42px; /* 全按鈕高度 */
        line-height: 42px; /* ON OFF文字高度 */
        font-size: 16px;
        color: white;
        font-family: Trebuchet, Arial, sans-serif;
        font-weight: bold;
        box-sizing: border-box;
    }

    /* ON */
    .cktoggle_square_inner:before { 
        content: "ON";
        padding-top: 2px;
        padding-left: 10px;
        background-color: #55a1ff;
        background-image: linear-gradient(to bottom,#398bf1,#88bdff);
        color: #FFFFFF;
    }

    /* OFF */
    .cktoggle_square_inner:after { 
        content: "OFF";
        padding-top: 2px;
        padding-right: 10px;
        background-color: #EEEEEE;
        background-image: linear-gradient(to bottom,#cccccc,#EEEEEE);
        color: #999999;
        text-align: right;
    }

/* 上面的小圓 */
.cktoggle_square_circle { 
    display: block;
    overflow: hidden;
    width: 48px; /* 小圓寬度 */
    height: 42px; /* 小圓高度 */
    margin: 0px; /* 小圓距離上下左右margin */
    background-color: #f5f5f5;
    position: absolute;
    top: 0px; /* 距離上邊緣 左右是和一開始的位置有關 */
    right: 66px; /* uncheck時 小圓移動到離右側距離XXpx位置 */
    border: 3px solid #c1c1c1; /* 小圓外框顏色 */
    border-radius: 8px;
    transition: all 0.3s ease-in 0s;
}

    /* 上面的小圓深色反光處 */
    .cktoggle_square_circle::after { 
        content: "";
        position: absolute;
        top: 25px;
        left: -15px;
        width: 120px;
        height: 80px;
        background-color: #dedede;
        transform: rotate(-30deg);
    }

/* 當unchecked時，小圓顏色變換 */
.cktoggle_square_checkbox:not(:checked) + .cktoggle_square_label .cktoggle_square_circle {
    background-color: #f5f5f5;
    border-color: #b7b7b7;
}

/* 當unchecked時，外框顏色變換 */
.cktoggle_square_checkbox:not(:checked) + .cktoggle_square_label { 
    border-color: #8e8e8e;
}

/* label和背景的移動 */
.cktoggle_square_checkbox:checked + .cktoggle_square_label .cktoggle_square_inner { 
    margin-left: 0;
}

/* label和上面小圓的移動 */
.cktoggle_square_checkbox:checked + .cktoggle_square_label .cktoggle_square_circle { 
    right: 0px;
}

/* ************************
   方形版本結束
************************ */

Radio button變化型 – 文字在上版

文字直接嵌入在操作鈕上，點擊時會切換ON和OFF不同文字。

顯示的結果會長這樣：

Radio button變化型結果 – 文字在上版

程式碼HTML如下：

<!-- HTML -->

<div class="cktoggle_textTop">
    <input type="checkbox" class="cktoggle_textTop_checkbox" id="cktoggle_textTop_id" checked>

    <label class="cktoggle_textTop_label" for="cktoggle_textTop_id">
        <span class="cktoggle_textTop_inner"></span>
        <span class="cktoggle_textTop_circle"></span>
    </label>
</div>

CSS部分如下：

/* CSS */

/* ************************
    文字在上版本開始
************************ */

.cktoggle_textTop {
    position: absolute;
    width: 320px; /* 全按鈕寬度 */
    top: 410px;
    left: 50px;
}

/* 原按鈕樣式隱藏 */
.cktoggle_textTop_checkbox { 
    display: none;
}

/* 主外框 */
.cktoggle_textTop_label { 
    display: block;
    overflow: hidden;
    cursor: pointer;
    border-radius: 50px;
}

/* 背景 */
.cktoggle_textTop_inner { 
    display: block;
    width: 200%; /* 左+右背景總寬度 */
    margin-left: -100%; /* 左側及右側背景位置 一開始躲在左側100% */
    transition: margin 0.3s ease-in 0s;
}

    /* 背景 */
    .cktoggle_textTop_inner:before, .cktoggle_textTop_inner:after { 
        display: block;
        float: left;
        width: 50%; /* before和after各佔50% */
        height: 28px; /* 全按鈕高度 */
        line-height: 42px; /* ON OFF文字高度 */
        font-size: 16px;
        color: white;
        font-family: Trebuchet, Arial, sans-serif;
        font-weight: bold;
        box-sizing: border-box;
    }

    /* ON */
    .cktoggle_textTop_inner:before { 
        content: "";
        padding-left: 10px;
        background-color: #51c159;
        background-image: linear-gradient(to bottom,#51c159,#80dc7e);
        color: #FFFFFF;
    }

    /* OFF */
    .cktoggle_textTop_inner:after { 
        content: "";
        padding-right: 10px;
        background-color: #5c9bbf;
        background-image: linear-gradient(to bottom,#5c9bbf,#8cc1ef);
        color: #999999;
        text-align: right;
    }

/* 上面的小圓 */
.cktoggle_textTop_circle { 
    display: block;
    overflow: hidden;
    width: 220px; /* 小圓寬度 */
    height: 22px; /* 小圓高度 */
    margin: 0px; /* 小圓距離上下左右margin */
    background-color: #f5f5f5;
    position: absolute;
    top: 0px; /* 距離上邊緣 左右是和一開始的位置有關 */
    right: 95px; /* uncheck時 小圓移動到離右側距離XXpx位置 */
    border: 3px solid #c1c1c1; /* 小圓外框顏色 */
    border-radius: 50px;
    text-align: center;
    box-shadow: inset 0px 0px 15px 1px #afa7a7;
    transition: all 0.3s ease-in 0s;
}

    /* 直接在按鈕上增加文字 */
    .cktoggle_textTop_circle::before {
        content: "ON";
        padding-top: 3px;
        font-family: Trebuchet, Arial, sans-serif;
    }

    .cktoggle_textTop_circle::after {
        content: "OFF";
        padding-top: 3px;
        font-family: Trebuchet, Arial, sans-serif;
    }

/* 當切換的時候 上面的字隱藏/出現 */
.cktoggle_textTop_checkbox:checked + .cktoggle_textTop_label .cktoggle_textTop_circle::before {
    display: block;
}

.cktoggle_textTop_checkbox:not(:checked) + .cktoggle_textTop_label .cktoggle_textTop_circle::before {
    display: none;
}

.cktoggle_textTop_checkbox:checked + .cktoggle_textTop_label .cktoggle_textTop_circle::after {
    display: none;
}

.cktoggle_textTop_checkbox:not(:checked) + .cktoggle_textTop_label .cktoggle_textTop_circle::after {
    display: block;
}

/* 當unchecked時，小圓顏色變換 */
.cktoggle_textTop_checkbox:not(:checked) + .cktoggle_textTop_label .cktoggle_textTop_circle {
    background-color: #f5f5f5;
    border-color: #b7b7b7;
}

/* label和背景的移動 */
.cktoggle_textTop_checkbox:checked + .cktoggle_textTop_label .cktoggle_textTop_inner { 
    margin-left: 0;
}

/* label和上面小圓的移動 */
.cktoggle_textTop_checkbox:checked + .cktoggle_textTop_label .cktoggle_textTop_circle { 
    right: 0px;
}

/* ************************
   文字在上版本結束
************************ */

總結

以上三種視覺上的變化型，讓你可以不再侷限於單一種按鈕樣式。

當然，最好是可以自己修改細節部分，讓你做出來的樣式可以最符合你的系統樣式噢！

希望透過以上的範例，運用純CSS教會大家開關型的Radio button美化與三種變化型囉！

延伸閱讀：
RWD教學-只要兩行就能輕鬆見效的實作經驗

Radio button變化型 – 無字大圓版

Radio button變化型 – 方形版

Radio button變化型 – 文字在上版

總結

為你推薦

頂級 Cloudways 折扣碼免費索取！WordPress 架站優惠碼

內容行銷如何做更好？與讀者產生共鳴的2種因素

內容行銷是什麼？官網必做的3個內容行銷重點