還沒看上集嗎？
直接點選下方網址回顧上集教學吧！
連結：純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不同文字。

顯示的結果會長這樣：

程式碼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教學-只要兩行就能輕鬆見效的實作經驗

然而較常使用到開關型的地方，應該是在手機版許多的使用者設定頁面會看到，類似電源開關的ON和OFF按鈕。

因此這裡整理了幾種樣式給大家參考，上集先給大家一般基本樣式的程式碼，如果有想知道更多相關的變化型，可以再參考下集的教學噢！

那我們開始用程式碼教大家，用純CSS就能做到開關型Radio button吧！

純CSS製作橫向開關型Radio button

先分析一下，Radio button的開關型，可以分成左右移動的開關和上下移動的開關。

從最常見的型態先看看，最後呈現的結果會長這樣：

程式碼HTML如下：

<!-- HTML -->

<div class="cktoggle">
    <input type="checkbox" class="cktoggle_checkbox" id="cktoggle_id2" checked>

    <label class="cktoggle_label" for="cktoggle_id2">
        <span class="cktoggle_inner"></span>
        <span class="cktoggle_circle"></span>
    </label>
</div>

接著是CSS程式碼：

/* CSS */

/* ************************
    原始版本開始
************************ */

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

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

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

/* 背景 */
.cktoggle_inner { 
    display: block;
    width: 200%;
    margin-left: -100%;
    transition: margin 0.3s ease-in 0s;
}

    /* 背景 */
    .cktoggle_inner:before, .cktoggle_inner:after { 
        display: block;
        float: left;
        width: 50%; /* before和after各佔50% */
        height: 40px; /* 全按鈕高度 */
        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_inner:before { 
        content: "ON";
        padding-left: 10px;
        background-color: #10b736;
        color: #FFFFFF;
    }

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

/* 上面的小圓 */
.cktoggle_circle { 
    display: block;
    width: 20px; /* 小圓寬度 */
    height: 20px; /* 小圓高度 */
    margin: 0px; /* 小圓距離上下左右margin */
    background: white;
    position: absolute;
    top: 9px; /* 距離上邊緣 左右是和一開始的位置有關 */
    right: 85px; /* uncheck時 小圓移動到離右側距離XXpx位置 */
    border: 3px solid #1b9b39; /* 小圓外框顏色 */
    border-radius: 100px;
    transition: right 0.3s ease-in 0s;
}

/* label和背景的移動 */
.cktoggle_checkbox:checked + .cktoggle_label .cktoggle_inner { 
    margin-left: 0;
}

/* label和上面小圓的移動 */
.cktoggle_checkbox:checked + .cktoggle_label .cktoggle_circle { 
    right: 10px;
}

/* ************************
    原始版本結束
************************ */

純CSS製作縱向開關型Radio button

接下來，運用前一個橫向例子中相同的視覺樣式，只是從橫向變為縱向的程式寫法，最後呈現結果長這樣：

程式碼HTML如下：

<!-- HTML -->

<div class="cktoggle_vertical">
    <input type="checkbox" class="cktoggle_vertical_checkbox" id="cktoggle_vertical_id" checked>

    <label class="cktoggle_vertical_label" for="cktoggle_vertical_id">
        <span class="cktoggle_vertical_inner"></span>
        <span class="cktoggle_vertical_circle"></span>
    </label>
</div>

接著是CSS部分：

/* CSS */

/* ************************
    垂直版本開始
************************ */


.cktoggle_vertical {
    position: absolute;
    width: 40px; /* 全按鈕寬度 */
    top: 520px;
    left: 50px;
}

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

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

/* 背景 */
.cktoggle_vertical_inner { 
    display: block;
    height: 200%;
    margin-top: -100px;
    transition: margin 0.3s ease-in 0s;
}

/* 背景 */
.cktoggle_vertical_inner:before, .cktoggle_vertical_inner:after { 

        display: block;
        float: left;
        width: 100%; /* before和after各佔100% 多的部分float left 所以OFF在下方 */
        height: 50%; /* 全按鈕高度 */
        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_vertical_inner:before { 
        content: "OFF";
        padding-right: 3px;
        background-color: #EEEEEE;
        color: #999999;
        text-align: right;
    }

    /* OFF */
    .cktoggle_vertical_inner:after { 
        content: "ON";
        padding-left: 8px;
        padding-top: 60px;
        background-color: #10b736;
        color: #FFFFFF;
    }

/* 上面的小圓 */
.cktoggle_vertical_circle { 
    display: block;
    width: 20px; /* 小圓寬度 */
    height: 20px; /* 小圓高度 */
    margin: 0px; /* 小圓距離上下左右margin */
    background: white;
    position: absolute;
    top: 8px; /* unchecked時位置 */
    right: 5px; /* 小圓離右側距離 */
    border: 3px solid #1b9b39; /* 小圓外框顏色 */
    border-radius: 100px;
    transition: top 0.3s ease-in 0s;
}

/* label和背景的移動 */
.cktoggle_vertical_checkbox:checked + .cktoggle_vertical_label .cktoggle_vertical_inner { 
    margin-top: 0;
}

/* label和上面小圓的移動 */
.cktoggle_vertical_checkbox:checked + .cktoggle_vertical_label .cktoggle_vertical_circle { 
    top: 70px;
}

/* ************************
    垂直版本結束
************************ */

總結

如果是做系統的人，開關型按鈕可以讓使用者看到一整排需要操作的設定，比起單純看到兩顆Radio button來說，更直覺且質感提升不少，是個推薦的呈現方式噢！

把基本的橫向與縱向開關型按鈕看懂之後，我們再來進行下集的變化型。

變化型指的其實是樣式不同而已，相信如果橫向與縱向的程式能夠看懂並且懂得如何修改這些程式碼的話，我想下集的變化型肯定難不倒你的！

前往下集連結：
純CSS將Radio button美化與開關型整理(下)