CSS3 制作按钮

最近在学习CSS3,利用CSS3的text-shadow/box-shadow/border-radius和background gradient 属性就可以写出很多漂亮的图案,减少图片加载的时间。

自己试着写了一个简单的小按钮:

设计图如下:

button_design

效果:

See the case study

代码:

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<a id="css_button" href="#">See the case study </a>

圆角和圆形靠border-radius实现,渐变的背景色依靠background gradient,三角形则依靠border来实现。

a标签需要有block属性,否则IE下的背景渐变无法显示。IE下效果的确不如FF、Chrome。

 

按钮的设计参考http://ohmedia.ca/这一网站。

 



Leave a Reply

Your email address will not be published. Required fields are marked *

*