单选按钮的样式制作

在网上我们经常看到各种各样的单选复选按钮的样式，都很美观大方，那么它们到底是怎样制作的呢，今天我也找了一个按钮样式，决定制作一个给大家研究以下，并附上源码，按钮如下:

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
以上就是我为大家展示的代码，大家可以自己制作一个属于自己的按钮样式哦！