看到網上有很多漂亮的按鈕，其中大多摻雜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，到這裏就大功告成啦！偷偷哭泣一下，寫個文章真的不容易！！！