大家都知道，无论我们是设计一个网站或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都是不可少的。

下面的代码是来自Red的《Just some other awesome CSS3 buttons》一文中。

Html Code

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

				<a href="" class="button">Button</a>
			

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

				<a href="" class="button add">Add</a>
			

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有什么长处呢？

1. 加截快，省去了http对图片的请求
2. 可以直接通过font-size来改变图标大小
3. 颜色和背景的样式很容易通过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”外，还有许多麻烦的事情。至于你们信不信，反正我是信了。（串用网络名言，哈。。。。。。。）

如需转载烦请注明出处：W3CPLUS