按鈕是HTML非常重要的控件之一懦底，以唯品會的注冊按鈕為例制作一個當前非常流行的按鈕的CSS樣式。其他主流網(wǎng)站的按鈕實現(xiàn)方式也是類似的笙蒙，雖然代碼多一些抵屿，但是童鞋一步步來，看看效果吧捅位。
- 準備
現(xiàn)在比較流行使用a標簽制作按鈕轧葛，所以搂抒，先在html中加上個a標簽如下：
<a href="#" class="btn-vip">立刻注冊</a>
在標簽上加上個類屬性，值為btn-vip尿扯。接著我們就為這個類加上一些CSS效果求晶。
.btn-vip {
// 屬性
}
準備工作OK，效果如下圖：
1. 設置按鈕的大小和邊框
我們先設置按鈕的邊框衷笋。(顏色使用唯品會特用的紅色#f10180)
border:1px solid #f10180;
看一下邊框出來了芳杏！(忘記border這種簡寫方式的童鞋該復習了。)
然后設置按鈕大小右莱，數(shù)值大家可以使用工具量一下蚜锨。這里我們使用寬143px和高43px。
width: 143px;
height: 43px;
看一下效果慢蜓。
已沒有任何變化亚再，為啥？不要忘記a標簽是行內(nèi)標簽晨抡，寬高設置是不起作用的出牧，腫么辦久橙？聰明的童鞋知道使用display可以修改這個屬性巾兆。代碼如下：
display: inline-block;
寬高設置生效了同欠。
邊框還有個圓角，使用CSS3的屬性border-radius設置一下吧调煎。（單詞radius是半徑）
border-radius: 5px;
效果如下：
2. 設置按鈕的背景和文字
按鈕大小和邊框設置好了镜遣，我們要設置按鈕里面的樣式了。
先從背景色開始士袄。
background: #f10180;
改變一下字體的顏色和大小
color:#fff;
font-weight:bold;
font-size:18px;
大體樣子已經(jīng)出來了悲关，只要調(diào)整一下位置，上下左右居中即可娄柳。
先水平居中
text-align: center;
再來垂直居中寓辱。（文本的垂直居中有很多種，這里使用的是行高設置為按鈕高度43px這種方式）
line-height: 43px;
通常赤拒，按鈕默認是不顯示下劃線的秫筏，我們除去下劃線。
text-decoration: none;
OK挎挖，我們的最終效果如下：
3. 添加特效
通常这敬，當我們把鼠標放在按鈕上會有一些特定提示，表示這個是個可以點擊的蕉朵。有種做法比較流行就是在文字下增加下劃線（之前把下劃線除去了鹅颊，現(xiàn)在又加了回來）。鼠標放在元素上顯示演示墓造，我們的做法是使用:hover這個偽類堪伍。
.btn-vip:hover{
text-decoration: underline;
}
鼠標放在按鈕上效果如下：
4.最后
整個按鈕CSS代碼整理如下,童鞋們試一下吧。
.btn-vip {
border:1px solid #f10180;
width: 143px;
height: 43px;
display: inline-block;
border-radius: 5px;
background: #f10180;
color:#fff;
font-weight:bold;
font-size:18px;
text-align: center;
line-height: 43px;
text-decoration: none;
}
.btn-vip:hover{
text-decoration: underline;
}
童鞋們試一下給其他標簽加上這個類試試觅闽。
<button class="btn-vip">立即注冊</button>
<input type="button" value="立即注冊" class="btn-vip"/>
<span class="btn-vip">立即注冊</span>
<div class="btn-vip">立即注冊</div>
上面的標簽都顯示成按鈕的樣子帝雇，這是CSS威力所在，但是實際上蛉拙，我們只在a button和input type="button"加上按鈕CSS樣式尸闸。
代碼雖然多了一些，童鞋們孕锄，慢慢試一下吮廉，收獲會不少哦！
