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

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

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

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

   HTML代码:<h2>我最喜欢的明星</h2><div class="radioStyle"><input type="radio" name="like" id="likeL" checked><label for="likeL">李易峰</label></div><div class="radioStyle"><input type="radio" name="like" id="likeD"><label for="likeD">邓伦</label></div><div class="radioStyle"><input type="radio" name="like" id="likeH"><label for="likeH">黄轩</label></div><div class="radioStyle"><input type="radio" name="like" id="likeZ"><label for="likeZ">郑爽</label></div>

此时样式为： 

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

二、我先给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都会对此样式生效！就是你点击<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，到这里就大功告成啦！偷偷哭泣一下，写个文章真的不容易！！！