找回密码
 注册帐号

扫一扫,访问微社区

CSS3教程 使用css3和rgba创建超酷按钮

2015-1-30 16:29| 发布者: 杨炎| 查看: 14313| 评论: 0|来自: CSS基础教程

摘要: 蛮牛问答 U3D中文手册虽然css3仅仅增加了少数新特性,但是这些属性却可以做很多有用事情,可以大大的简化我们的工作。我们今天做的这些按钮,就是充分利用css3的圆角、盒子阴影和文字阴影效果,同时使用rgba色彩。让 ...
蛮牛问答
U3D中文手册

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

让我们先来看一下demo吧:

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

1.按钮的基本设置

我们需要先设置一下按钮的基本样式,这里我们使用a标签,当然也可以使用inputbutton标签等,这里使用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.200

相关阅读

文章点评
相关文章
关注游戏蛮牛公众号送vip