CSS3和HTML实体符制作带图片效果的Buttons.docx

大家都知道，无论我们是设计一个网站或Web应用程序，我们都少不了Buttons。自从有了CSS3后，我们制作一些漂亮的Buttons就容易多了，只是有一点头痛的是，IE6-8不能支持这种靓丽的Buttons。这里介绍一种不用图片制作图片效果的Buttons。如图：从上图的效果中大家可以发现，Buttons都带有icon，但是我要告诉大家的是，上面的Buttons没有使用任何icon图片，大家会不会感到神奇呀。我想你和我是一样的，觉得CSS3是特别的伟大和神奇。到了这里你可能会问，没有图片，那用了什么？这个问题问得太牛了，下面我就告诉大家是怎么来的，感兴趣的一起接着往下看吧。大家现在都知道了上面的icon并不是图片，那么为了制作这样的icon效果，这里使用了HTML实体符，用这些实体符来模仿icon的效果，当然CSS3的gradients,border-radius,text-shadow,box-shadow和一些CSS3属性，制作Buttons都是不可少的。Html Code简单的Buttons,也就是没有icon图标的a href= class=buttonButton/a有icon的Buttons，我们给Buttons加上一个类名“add”a href= class=button addAdd/aCSS 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-li