专注于WEB前端开发,HTML基础知识,CSS基础知识,HTML5和CSS3,Javascript,Jquery,Jquery插件,移动开发,微信开发等技术话题

当前位置:CSSTOP主页 > CSS3属性 > 正文

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

无论是设计一个网站,还是Web应用程序,页面上都离不开Buttons。CSS3出现后,网上就泛滥着各式各样的Buttons,遗憾的是,IE6-8不能支持那么炫的Buttons。偶然的机会,几天前在读Red的《Just some other awesome CSS3 buttons》中,我又见识到了一种不用图片,但能制作出来图片效果的Buttons,是不是很神奇,很有意思。所以今天在跟大家说说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就非常方便了,你只要知道实体符的编码就OK了,如

        .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,IE7是不兼容的哦,也不要使用input来制作Buttons,具体是为什么?除了我们常说的,IE6,IE7不支持“:before,:after”外,还有更多的坑等你来踩呢!