在網上我們經常看到各種各樣的單選復選按鈕的樣式，都很美觀大方，那么它們到底是怎樣制作的呢，今天我也找了一個按鈕樣式，決定制作一個給大家研究以下，并附上源碼，按鈕如下:

css3_radio1.png

首先我們需要寫出html代碼

<label>
    <input type="radio" name="tab" />
    <span class="box">  <!--最外層的圓-->
        <span class="box1">     <!--藍色小圓-->
            <span class="box-content"></span>   <!--被選中后的小白圓-->
        </span>
    </span>
</label>
<label>
    <input type="radio" name="tab" />
    <span class="box">
        <span class="box1">
            <span class="box-content"></span>
        </span>
    </span>
</label>
<label>
    <input type="radio" name="tab" />
    <span class="box">
        <span class="box1">
            <span class="box-content"></span>
        </span>
    </span>
</label>

然后附上css樣式

<style>
    label{
        float: left;
        margin: 0 10px;
        position: relative;
        overflow: hidden;
    }
    label input{
        position: absolute;     /*設置相對定位，將原有按鈕移出邊框并隱藏*/
        top: -20px;
        left: -20px;
    }
    label .box{
        display: block;
        width: 30px;
        height: 30px;
        border-radius: 30px;
        color: #;
        background: linear-gradient( #2b2b2b 20%,#ccc,100%);
        background: -webkit-linear-gradient(#2b2b2b 20%,#ccc 100%);
        box-sizing: border-box;
        padding-top:4px;
    }
    label .box .box1{
        display: block;
        width: 22px;
        height: 22px;
        margin: 0px auto;
        background: #1fb7c4;
        border-radius: 10px;
        padding: 3px;
        box-sizing: border-box;
    }
    label .box .box1 .box-content{
        display: none;
        width: 15px;
        height: 15px;
        margin: 0 auto;
        background: #FFFFFF;
        border-radius: 8px;
    }
    label input:checked~.box .box1 .box-content{    /*當按鈕被選中時做樣式的變化*/
        display: block;
    }
    
</style>  

完成時按鈕如下

css3_radio2.png