按钮是HTML非常重要的控件之一，以唯品会的注册按钮为例制作一个当前非常流行的按钮的CSS样式。其他主流网站的按钮实现方式也是类似的，虽然代码多一些，但是童鞋一步步来，看看效果吧。
- 准备
现在比较流行使用a标签制作按钮，所以，先在html中加上个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;
}
童鞋们试一下给其他标签加上这个类试试。
立即注册
立即注册
上面的标签都显示成按钮的样子，这是CSS威力所在，但是实际上，我们只在a button和input type="button"加上按钮CSS样式。
代码虽然多了一些，童鞋们，慢慢试一下，收获会不少哦！