html速成按钮样式,前端技巧集：从零制作华丽的按钮CSS样式

按钮效果

按钮是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样式。

代码虽然多了一些，童鞋们，慢慢试一下，收获会不少哦！