使用CSS3制作水晶按钮

主要使用CSS3里的border-radius，在firefox, chrome, safari都能看到效果哦（无视IE系列吧。。。）

来源及更多应用请参考《无懈可击的Web设计2--CSS深入应用》 

 

1. 先制作一张背景图片，height:100px, width:2px, 上半部填充白色，透明度为20%; 下半部分完全透明，效果如下：

 

2. Html

 

<div class="divBtn"><a href="#">Click Me</a></div>

 

 

3. CSS: 

 

.divBtn a { 

 background: #3792b3 url(btn-glass.png) repeat-x 0 50%; 

 border: 1px solid #3792b3; 
 color: #fff; 
 font-size: 12px; 
 padding: 6px 20px; 
 text-decoration: none; 

 /*这3句是重点啊~~~*/
 border-radius: 14px; 
 -webkit-border-radius: 14px; 
 -moz-border-radius: 14px; 
}

 

 

 

4. 效果如下：（IE下看到的是直角哦~看不到圆角的童鞋赶紧换浏览器吧！）

Click Me

 

 

只要改变背景颜色就能看到看到不同效果啦（以下是截图）~~~