多年来,我们通常透过图片或者JavaScript来创建非标准的漂亮的按钮。
随着浏览器对CSS3的越来越多的支持,我们已经可以不受阻碍地使用CSS3按钮了。
使用CSS3的属性,有着设计按钮的巨大空间,使用border-radius实现圆角,使用linear-gradient以及box-shadow来实现渐变和阴影,以及动画过场效果,以及……
这里列出了十几个代码优美又富有创意的CSS3按钮,你可以使用它们或者从中得到启发。此外,你可以在文章的结尾找到所有其他的CSS3按钮相关的资源以帮助你创建更好的按钮。
CSS3 Buttons With Simple
Markup
尽量使用简单的标记来创建的一套按钮,共计18个。
其中有三个只适合Webkit内核的浏览器(如Safari、Chrome),其余的可兼容所有主流浏览器。
这是一个简单的CSS框架,用以创建GitHub风格的按钮。
这些按钮可以拥有圆角以及按钮(事先将按钮图标列表使用CSS
sprite技术做好)
Zardi是一个已经制作好的CSS文件,可以创建各种颜色和形状的按钮。
这个文件大小大概为4KB,无论如何,仅使用有需要的样式有助于减小其大小。
Super Awesome Buttons
with CSS3 and RGB
(Demo网址)
这些CSS3按钮使用box-shadow和border-radius等属性来创建其外观。
Sexy Buttons
Other CSS3 Buttons Resources
- CSS3 gradient buttons
- CSS3 buttons without any images
- Better button and nav interactions
- Make CSS3 buttons like a boss
- How to design a sexy buttton using CSS
- Build kick-ass practical CSS3 buttons
- 10 Awesome CSS3 Buttons to use on your website
- Creating a realistic looking button with CSS3
- Make CSS3 buttons that are extremely fancy
- Building beautiful buttons with css gradients
原文:CSS3 Buttons – 10+ Awesome Ready-To-Use Solutions (+All Related Tutorials You Need)