首页 > 网页教程 > CSS > 用CSS3圆角、盒子阴影、文字阴影效果和RGBa创建超酷的按钮

用CSS3圆角、盒子阴影、文字阴影效果和RGBa创建超酷的按钮

时间:2011-04-21    作者:不详   来源:互联网

呃,看到这个标题,我们可以首先将IE系浏览器无视了。

我承认,我是有极简主义倾向的,我希望能够使用最少的代码和图片做更多的事情。

虽然CSS3仅仅增加了少数新特性,但是这些属性却可以做很多有用的事情,可以大大的简化我们的工作。我们今天做的这些按钮,就是充分利用CSS3的圆角、盒子阴影和文字阴影效果,同时使用RGBa色彩。

让我们先来看一下demo吧:

我们可以通过四步来做出这些漂亮的按钮:

1.按钮的基本设置

我们需要先设置一下按钮的基本样式,这里我们使用a标签,当然也可以使用input、button标签等,这里使用a标签是因为这三个标签中只有a标签支持:hover伪类。

.btn {
          display: inline-block;/*thanks to ytzong*/
          /*display:block;
          float:left;
          margin:5px; */
          padding: 4px 10px;
          font:bold 13px/180% Tahoma, sans-serif;
          color: #fff;
          text-decoration: none;
          overflow:hidden;
          }

此处多谢ytzong童鞋的建议,我们改为采用display:inline-block,这样可以省去float和margin两行代码。——神飞@05.31.2009

2.半透明的png渐变图片

这是我们这里唯一用到的一个图片,这个透明的png图片用来实现颜色的渐变。这个图片我们可以称之为单色透明度渐变。在CSS中,使用背景演示+这样的png图片就可以实现不同的色彩渐变效果。当然,这个不是CSS3的特性,除了IE6以下版本的浏览器,所有的浏览器都可以实现这样的效果。你可以点击这里查看该png文件。

.btn {
          ...
          background: #222 url(sprites.png) repeat-x;
          /**background**/
          }

3.圆角

圆角(border-radius)是目前浏览器支持最好的CSS3特性之一,除了IE系浏览器,各个A级浏览器都支持,尽管大都是通过私有属性来实现的,至少,这是可用的。

.btn {
          ...
          background: #222 url(sprites.png) repeat-x;
          /**背景图片**/
          -moz-border-radius: 5px;
          -webkit-border-radius: 5px;
          border-radius: 5px;
          /**圆角**/
          }

4.阴影和RGBa

box-shadow和text-shadow是CSS3新增的两个重要的属性,它们可以很方便的实现块级元素阴影和文字的阴影。但是,如果如果阴影的颜色使用半透明效果,岂不是更好?这样元素可以更好的和背景融合到一起。值得注意的是,FF只有等到3.5版本才支持text-shadow属性(目前Firefox3.5beta4版本已经支持)。

.btn {
 ...
 background: #222 url(sprites.png) repeat-x;
 /**背景图片**/
 -moz-border-radius: 5px;
 -webkit-border-radius: 5px;
 border-radius: 5px;
 /**圆角**/
 -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
 -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
 /**按钮阴影**/
 text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.25);
 /**文字阴影**/
}

好了,到现在,我们的按钮已经完全做好了。它已经实现我们的目标了。

这个按钮,是黑色的,那么其它颜色的按钮实现起来也就比较容易了:

...

          .green.btn, .green.btn:visited {background-color: #91bd09;}
          .green:hover {background-color: #749a02;}
          .blue, .blue:visited {background-color: #2daebf;}
          .blue:hover {background-color: #007d9a;}
          .red, .red:visited {background-color: #e33100;}
          .red:hover {background-color: #872300;}
          ...

请注意,这些样式一定要放在.btn的后面。这样这些绿色、蓝色、红色等颜色的按钮的背景色才能重写.btn的背景色。然后再使用

最后,让我们来可怜一下IE浏览器吧,这些按钮在IE7和IE8浏览器中会显示直角、有渐变色、无阴影、无透明色,但是在IE6中,它将显示浅蓝色的背景,这是因为IE6不支持png透明所致,如果你想让它在IE6中能够像个按钮,就用那些js后IE的滤镜来处理吧。

相关推荐
初识CSS3的强大功能
如何用CSS3 border-radius来实现圆角DIV?
CSS1-CSS3选择器汇总表
微软的IE9将要支持CSS3和HTML5?
CSS3亮点前瞻之线性渐变实例详解
不同浏览器在CSS3和HTML5下的兼容速查表
CSS3属性box-shadow(图层阴影)的使用教程
CSS3盒子模型(Flexible Box Module)之位置排序应用详解
CSS3盒子模型(Flexible Box Module)之尺寸应用详解
让IE6/IE7/IE8支持CSS3属性的脚本
Smashing Magazine CSS3设计赛获奖作品赏析
前端设计必备的CSS3开发实用工具集
看这些用CSS3绘制的图标,你震撼了吗
利用CSS3技术嵌入Web字体格式及浏览器兼容性介绍
24款超级实用的免费CSS3在线工具宝典
HTML5和CSS3开发的功能检测类库 — Modernizr
CSS3教程:17种用CSS实现的很酷炫的立体网页按钮和字体效果
6个设计精致使用CSS3技术美化的表单教程
5款立体质感的CSS3导航菜单(附英文教程和下载)
关注一些鲜为人知、试验性的CSS属性
36款超级实用的CSS3在线生成器和工具推荐
7个基于CSS3的工具提示(tooltip)教程推荐
网页前端开发:微博CSS3适用细节初探
CSS3教程:创意独特漂亮的CSS动画导航菜单设计
20个基于CSS3制作的3D按钮教程分享(附DEMO演示)
25个超酷的CSS3动画按钮和菜单教程分享
CSS3新手入门教程:快乐的CSS3之旅!
21个视觉效果超棒的CSS3动画特效欣赏(附演示)
7款免费的CSS3代码在线自动生成工具推荐
30款最佳的CSS3工具和应用程序推荐 web开发必备
8个CSS3前端开发必备的实用在线帮助手册
29款web开发最佳CSS工具和应用推荐
9种网页设计有用的CSS3属性和使用技巧
10款超级实用的在线CSS3代码生成工具推荐
5款生成CSS3动画效果的CSS3类库和工具
7款具有缩放、倾斜、旋转的CSS3折叠特效插件分享

精彩推荐

热门教程