CSS3教程

当前位置: HTML5技术网 > CSS3教程 > 使用CSS3和RGBa创建超酷的按钮

使用CSS3和RGBa创建超酷的按钮

CSS3教程  手机阅读

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

让我们先来看一下demo吧:

css超酷按钮演示

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

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;
}

【使用CSS3和RGBa创建超酷的按钮】相关文章

1. 使用CSS3和RGBa创建超酷的按钮

2. CSS3 HTML5实例四(使用 RGBA 实现透明效果)

3. CSS3系列教程:RGBA

4. phonegap教程第三讲 Jquery Mobile中的按钮

5. 用CSS3和JavaScript开发《街头霸王》游戏

6. 利用CSS3 Gradients创建无图片水晶按钮

7. jQuery/CSS3实现超酷的动画Tab菜单

8. CSS3实现超酷的图像动画变换特效

9. jQuery/CSS3实现超酷的动画Tab菜单

10. 很酷的 CSS3 导航按钮

本文来源:https://www.51html5.com/a769.html

点击展开全部

﹝使用CSS3和RGBa创建超酷的按钮﹞相关内容

「使用CSS3和RGBa创建超酷的按钮」相关专题