看到网上有很多漂亮的按钮，其中大多掺杂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，到这里就大功告成啦！偷偷哭泣一下，写个文章真的不容易！！！
