纯CSS+HTML实现【单选/多选按钮】美化特效

看到网上有很多漂亮的按钮，其中大多掺杂js来实现，今天我们来做一个纯CSS+HTML实现的单选按钮，让菜鸟小白也能轻松做出来！

 首先附上最后的效果图：(忽略我追星的肤浅！)

 一、 首先，我们写基本代码：

我们写4个div分别在里面放置4个单选按钮，第一个选项默认为选中状态，checked

   HTML代码:

    
我最喜欢的明星
    

        
        李易峰
    
    

        
        邓伦
    
    

        
        黄轩
    
    

        
        郑爽
    

此时样式为： 

接下来，我们要对这个单选按钮进行美化了！

二、我先给h2设置了正常粗细

重点是按钮，每个按钮都包含在一个为.radioStyle的Div中，为了让这四个div既能并排显示，又能设置宽高，我们用inline-block:

CSS代码:

 h2 {
       font-weight: normal;
    }
 .radioStyle {
       display: inline-block;
    }

 此时效果为：好啦！已经横排显示了！

三：隐藏按钮自带的样式

我们使用 visibility: hidden（占位隐藏），为啥不用display:none呢，因为这个属性不光隐藏，而且原来的空间也不占据了，visibility:hidden可以在隐藏的前提下，空出原有的位置！

隐藏之后我们好自己设置样式！

CSS代码：

.radioStyle input {
                        visibility: hidden;
                  }

 隐藏后的效果：且空出了原来样式按钮的位置

 四：设置新的按钮样式

 我们先对input以及label元素设置鼠标点击时的样式，再设置个相对定位，后面要用该定位作为父元素！！

CSS代码：

.radioStyle input[type="radio"] + label{
                                            position: relative;
                                            cursor: pointer;
                                        }

现在要开始给label加个样式，我们用伪类::before（此元素默认为行内元素）

样式为18*18的正方形，然后设置圆角边框为50%，使其变为圆形。绝对定位后，用left、right、top、bottom自行调整位置

CSS代码：

 .radioStyle input+label::before{
            content: '';
            position: absolute;        /*父元素为label，针对父元素进行绝对定位*/
            left: -24px;
            width: 18px;
            height: 18px;
            border: 1px solid #999; 
            border-radius: 50%;        /*圆角边框*/
        }

效果图为：

 

美化一下，当选中按钮之后，设置个边框阴影色，淡淡的蓝色

CSS代码：

.radioStyle input:checked+label::before {
            box-shadow: 0 0 6px #24b7e5;
        }

 input:checked表示input表单的选中状态

label::afbefore为label的伪类样式

input:checked+label::before，中间的 “+“ 是什么意思呢，就是input元素紧挨着的下一个元素label，我们用“+”号连接起来，表示input和label都会对此样式生效！就是你点击标签里的文字“李易峰”，它的圆按钮自动会是选中状态，且会应用淡蓝色的阴影样式！

 

接下来，我们要对选中的按钮设置选中的效果，给圆按钮里面加一个小实心圆。 

用伪类元素::after

我给它宽高都为12px大小，因为要放在里面，对吧，小一点好。

针对于父元素label绝对定位，然后调整位置（在谷歌浏览器里面用调试工具进行调试，决定好之后写入代码）

 最后给小圆点设置背景色，最好与外面的按钮边框颜色一致或接近，好看就行！！

CSS代码：

  .radioStyle input:checked+ label::after{
            content: '';
            position: absolute;    /*针对label进行绝对定位*/
            left: -20px;
            top: 4px;
            border-radius: 50%;    /*设置圆角*/
            width: 12px;
            height: 12px;
            background: #24b7e5;
        } 

 效果图附上：

OK，到这里就大功告成啦！偷偷哭泣一下，写个文章真的不容易！！！