看完http://www.w3cplus.com/css3/icon-buttons-with-css3-html-entities的文章
立刻想制作一系列的按钮,:D
开始:
1.在Html的body中加入
<a href="" class="button">Button</a> 然后在css文件中新建类button:
.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; pointer-events: none; } /* Hexadecimal entities for the icons */ .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"; }
_______________________________________________________________
_______________________________________________________________
2.给它在前面加个icon(不是图片,只是html实体符):
在css中再建一个类add:
.add:before {content: "\271A";} //斜杠271A就是前面的+icon了 接着在html中引用这个类,即:
<a href="button add">Button</a>
现在botton就变成了: 如果想改变前面的icon,可以在http://panmental.de/symbols/info.htm里面选一个喜欢的图案 然后将它取代\271A的位置,例如: .add:before {content: "☺";} 则botton会变成: _______________________________________________________________
3.如果想帮它修改一下大小,可以修改botton类中的:
font: bold 1em/2em Arial, Helvetica;
_______________________________________________________________ 4.增加圆角: 在css中再建一个类round:
.round{ border-top-left-radius: 10px; border-top-right-radius: 10px; border-bottom-right-radius: 10px; border-bottom-left-radius: 10px; } 接着在html中调用: <a href="button add round">Button</a> 效果当然就是: _______________________________________________________________ 最后发现了一个在线制作button的网站: http://css-tricks.com/examples/ButtonMaker/#
_______________________________________________________________ 哈哈,完成了,玩去啦:D