多年来,我们通常透过图片或者JavaScript来创建非标准的漂亮的按钮。

随着浏览器对CSS3的越来越多的支持,我们已经可以不受阻碍地使用CSS3按钮了。

使用CSS3的属性,有着设计按钮的巨大空间,使用border-radius实现圆角,使用linear-gradient以及box-shadow来实现渐变和阴影,以及动画过场效果,以及……

这里列出了十几个代码优美又富有创意的CSS3按钮,你可以使用它们或者从中得到启发。此外,你可以在文章的结尾找到所有其他的CSS3按钮相关的资源以帮助你创建更好的按钮。

CSS3 Buttons With Simple
Markup

20110420215722032.png

尽量使用简单的标记来创建的一套按钮,共计18个。

其中有三个只适合Webkit内核的浏览器(如Safari、Chrome),其余的可兼容所有主流浏览器。

GitHub-Style CSS3
Buttons

github-style-css3-buttons.gif

这是一个简单的CSS框架,用以创建GitHub风格的按钮。

这些按钮可以拥有圆角以及按钮(事先将按钮图标列表使用CSS
sprite技术做好)

Zardi

20110420220814359.png

Zardi是一个已经制作好的CSS文件,可以创建各种颜色和形状的按钮。

这个文件大小大概为4KB,无论如何,仅使用有需要的样式有助于减小其大小。

Super Awesome Buttons
with CSS3 and RGB
 

20110420221520749.png
Demo网址

这些CSS3按钮使用box-shadow和border-radius等属性来创建其外观。

BonBon Buttons

20110420222001003.png

Fancy
Buttons

20110420222416083.png

10 Nice CSS3
Buttons

nice-css3-buttons.gif

CSS3 Animated Bubble
Buttons

20110420223056249.png

Pretty CSS3
Buttons

20110420223523394.png

We Love Buttons

20110420223729064.png

Sexy Buttons

20110420224155706.png

Realistic CSS3 Buttons

realistic-css3-buttons.gif

Other CSS3 Buttons Resources

原文:CSS3 Buttons – 10+ Awesome Ready-To-Use Solutions (+All Related Tutorials You Need)