html 图片做成按钮样式,CSS3和HTML实体符制作带图片效果的Buttons

大家都知道，无论我们是设计一个网站或Web应用程序，我们都少不了Buttons。自从有了CSS3后，我们制作一些漂亮的Buttons就容易多了，只是有一点头痛的是，IE6-8不能支持这种靓丽的Buttons。前面我在《CSS3 Gradient Buttons》和《CSS——Bootstrap From Twitter》都有介绍关于CSS3制作好看的Buttons方法，并且在《LESS和CSS3动态制作按钮》介绍了如何使用CSS3结合Less动态制作不同的Buttons。本来有这几篇文章就足够让你制作出漂亮的Buttons，但是前几天在Red的《Just some other awesome CSS3 buttons》中见识了一种不用图片制作图片效果的Buttons。感觉这种方法很有意思，所以在再次和大有一起说说Buttons的制作。

在介绍如何制作之前，首先要感谢Red给我们事来这么好的方法，如果你感兴趣，可以直接点击《Just some other awesome CSS3 buttons》阅读，也可以点击Demo查看在线效果，其效果如下图所示：

从上图的效果中大家可以发现，Buttons都带有icon，但是我要告诉大家的是，上面的Buttons没有使用任何icon图片，大家会不会感到神奇呀。我想你和我是一样的，觉得CSS3是特别的伟大和神奇。到了这里你可能会问，没有图片，那用了什么？这个问题问得太牛了，下面我就告诉大家是怎么来的，感兴趣的一起接着往下看吧。

大家现在都知道了上面的icon并不是图片，那么为了制作这样的icon效果，这里使用了HTML实体符，用这些实体符来模仿icon的效果，当然CSS3的gradients,border-radius,text-shadow,box-shadow和一些CSS3属性，制作Buttons都是不可少的。

Html Code

简单的Buttons,也就是没有icon图标的

Button

有icon的Buttons，我们给Buttons加上一个类名“add”

Add

CSS Code

.button{

display: inline-block;

white-space: nowrap;

background-color: #ccc;

background-image: -webkit-gradient(linear, left top, left bottom, from(#eee), to(#ccc));

background-image: -webkit-linear-gradient(top, #eee, #ccc);

background-image: -moz-linear-gradient(top, #eee, #ccc);

background-image: -ms-linear-gradient(top, #eee, #ccc);

background-image: -o-linear-gradient(top, #eee, #ccc);

background-image: linear-gradient(top, #eee, #ccc);

filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#eeeeee', EndColorStr='#cccccc');

border: 1px solid #777;

padding: 0 1.5em;

margin: 0.5em;

font: bold 1em/2em Arial, Helvetica;

text-decoration: none;

color: #333;

text-shadow: 0 1px 0 rgba(255,255,255,.8);

-moz-border-radius: .2em;

-webkit-border-radius: .2em;

border-radius: .2em;

-moz-box-shadow: 0 0 1px 1px rgba(255,255,255,.8) inset, 0 1px 0 rgba(0,0,0,.3);

-webkit-box-shadow: 0 0 1px 1px rgba(255,255,255,.8) inset, 0 1px 0 rgba(0,0,0,.3);

box-shadow: 0 0 1px 1px rgba(255,255,255,.8) inset, 0 1px 0 rgba(0,0,0,.3);

}

.button:hover{

background-color: #ddd;

background-image: -webkit-gradient(linear, left top, left bottom, from(#fafafa), to(#ddd));

background-image: -webkit-linear-gradient(top, #fafafa, #ddd);

background-image: -moz-linear-gradient(top, #fafafa, #ddd);

background-image: -ms-linear-gradient(top, #fafafa, #ddd);

background-image: -o-linear-gradient(top, #fafafa, #ddd);

background-image: linear-gradient(top, #fafafa, #ddd);

filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#fafafa', EndColorStr='#dddddd');

}

.button:active {

-moz-box-shadow: 0 0 4px 2px rgba(0,0,0,.3) inset;

-webkit-box-shadow: 0 0 4px 2px rgba(0,0,0,.3) inset;

box-shadow: 0 0 4px 2px rgba(0,0,0,.3) inset;

position: relative;

top: 1px;

}

.button:focus {

outline: 0;

background: #fafafa;

}

.button:before {

background: #ccc;

background: rgba(0,0,0,.1);

float: left;

width: 1em;

text-align: center;

font-size: 1.5em;

margin: 0 1em 0 -1em;

padding: 0 .2em;

-moz-box-shadow: 1px 0 0 rgba(0,0,0,.5), 2px 0 0 rgba(255,255,255,.5);

-webkit-box-shadow: 1px 0 0 rgba(0,0,0,.5), 2px 0 0 rgba(255,255,255,.5);

box-shadow: 1px 0 0 rgba(0,0,0,.5), 2px 0 0 rgba(255,255,255,.5);

-moz-border-radius: .15em 0 0 .15em;

-webkit-border-radius: .15em 0 0 .15em;

border-radius: .15em 0 0 .15em;

}

接下来给相应的Buttons加上对应的实体符

.add:before{content: "\271A";}

.edit:before {content: "\270E";}

.delete:before{content: "\2718";}

.save:before { content: "\2714";}

.email:before{ content: "\2709";}

.like:before{ content: "\2764";}

.next:before{content: "\279C";}

.star:before{content: "\2605";}

.spark:before{content: "\2737";}

.play:before{content: "\25B6";}

这样制作带图片的Buttons就非常方便了，你只要知道实体符的编码就ＯＫ了，如

.go:before{ content: "\00BB";}

这样我们就制作出另一个带图标的Buttons。那么这种方法制作Buttons有什么长处呢？

加截快，省去了http对图片的请求

可以直接通过font-size来改变图标大小

颜色和背景的样式很容易通过CSS更新

不足之处，在ie3-8无法显示iocn具体可以看下图，各浏览器的渲染风格

这种方法不适合在input[type="submit"]。具体大家可以去阅读Red的《Just some other awesome CSS3 buttons》的更新部分，这里我就不在多说了。

最后在次感谢Red给我们带来的最么精彩的Buttons制作，同时也要 他的提供的代码。大家也可以根据自己的需求改变不同的实体符，不同的背景色，不同的前景色，不同的大小，从而制作出适合自己风格的Buttons，最后还是要提醒大家，采用这种方法制作Buttons的话，在IE6-7下是没有icon的效果，而且尽量不要使用input来制作Buttons，具体是为什么？除了这里说的，不支持“:before,:after”外，还有许多麻烦的事情。至于你们信不信，反正我是信了。(串用网络名言，哈。。。。。。。)

如需转载烦请注明出处：