按鈕是HTML非常重要的控件之一，以唯品會的注冊按鈕為例制作一個當前非常流行的按鈕的CSS樣式。其他主流網站的按鈕實現方式也是類似的，雖然代碼多一些，但是童鞋一步步來，看看效果吧。
- 準備
現在比較流行使用a標簽制作按鈕，所以，先在html中加上個a標簽如下：
<a href="#" class="btn-vip">立刻注冊</a>
在標簽上加上個類屬性，值為btn-vip。接著我們就為這個類加上一些CSS效果。
.btn-vip {
// 屬性
}
準備工作OK，效果如下圖：
1. 設置按鈕的大小和邊框
我們先設置按鈕的邊框。(顏色使用唯品會特用的紅色#f10180)
border:1px solid #f10180;
看一下邊框出來了！(忘記border這種簡寫方式的童鞋該復習了。)
然后設置按鈕大小，數值大家可以使用工具量一下。這里我們使用寬143px和高43px。
width: 143px;
height: 43px;
看一下效果。
已沒有任何變化，為啥？不要忘記a標簽是行內標簽，寬高設置是不起作用的，腫么辦？聰明的童鞋知道使用display可以修改這個屬性。代碼如下：
display: inline-block;
寬高設置生效了。
邊框還有個圓角，使用CSS3的屬性border-radius設置一下吧。（單詞radius是半徑）
border-radius: 5px;
效果如下：
2. 設置按鈕的背景和文字
按鈕大小和邊框設置好了，我們要設置按鈕里面的樣式了。
先從背景色開始。
background: #f10180;
改變一下字體的顏色和大小
color:#fff;
font-weight:bold;
font-size:18px;
大體樣子已經出來了，只要調整一下位置，上下左右居中即可。
先水平居中
text-align: center;
再來垂直居中。（文本的垂直居中有很多種，這里使用的是行高設置為按鈕高度43px這種方式）
line-height: 43px;
通常，按鈕默認是不顯示下劃線的，我們除去下劃線。
text-decoration: none;
OK，我們的最終效果如下：
3. 添加特效
通常，當我們把鼠標放在按鈕上會有一些特定提示，表示這個是個可以點擊的。有種做法比較流行就是在文字下增加下劃線（之前把下劃線除去了，現在又加了回來）。鼠標放在元素上顯示演示，我們的做法是使用: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樣式。
代碼雖然多了一些，童鞋們，慢慢試一下，收獲會不少哦！
