预览:
为了创建图标,这一套的CSS3按钮使用HTML实体。此外,渐变,阴影和其他许多CSS3特性千万不要忽视。
短代码
<a href=”" class=”button”>Button</a>
简单的按钮,没有任何图标
<a href="" class="button add">Add</a>
CSS
.button { display: inline-block; white-space: nowrap; background-color: #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); border-radius: .2em; 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: linear-gradient(top, #fafafa, #ddd); filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#fafafa', EndColorStr='#dddddd'); } .button:active { 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; box-shadow: 1px 0 0 rgba(0,0,0,.5), 2px 0 0 rgba(255,255,255,.5); 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"; }
为什么要使用实体而不是图像?
更快的加载,因为我们在这里谈的是文字。
可扩展,这取决于字体大小。
样式,颜色和背景很容易通过CSS来更新。
速度快
上面的按钮不使用任何图像,自动就没有多余的HTTP图像请求。没有图片加载意味着更快的渲染。
可扩展性
你只需要从以下简写声明改变字体大小的值:
font: bold 1em/2em Arial, Helvetica;
浏览器兼容性
截图使用最新版本的现代浏览器和Windows 7作为操作系统
使用iPhone3GS的屏幕截图进行。