您的位置：首页 > Web前端 > CSS

CSS3渐变色按钮

2011-09-28 17:28 531 查看

上一篇文章介绍了css3的渐变色属性，今天带来CSS3渐变特性的应用。可以去看一组按钮，我只用了 CSS创建完成的渐变按钮(不需要图片和Javascript)。这些按钮可以根据字体的大小伸缩。当填充和字体大小发生变化时，这些按钮的大小可以容易地适应。这种方法最好的部分就是能被应用于任何HTML元素，比如 div, span, p, a, button, input, 等等。

为什么这些按钮如此的酷?

纯 CSS: 没有图片和Javascript的应用。

渐变可以跨浏览器应用 (IE, Firefox 3.6, Chrome, and Safari).

灵活和可扩展: 通过改变字体大小和填充值,按钮的大小和圆角可以调整。

它有三个按钮状态: normal, hover 和 active。

能被应用于任何HTML元素，比如a, input, button, span, div, p, h3, 等等。

备注：如果CSS3不被支持，它将会显示成普通按钮 (没有渐变和阴影)。

预览

下面的图片展示的是不同的浏览器的不同的显示效果。

按钮的几个状态

正常状态 = 渐变并带有加粗和阴影效果。

悬停 = 更深的渐变

激活 = 反向渐变, 向下1px, 同时有更深的字体。

按钮的一般样式

下面的代码是类.button 的一般样式。为了基于字体大小变化而能自由伸缩，我在填充(padding)和边界半径border-radius时用了em值。要调整圆角和按钮的大小，简单地改变边界半径，字体大小和填充值。比如：我可以通过减小字体大小(font-size)和填充值(padding values)做一个更小的按钮( demo).

更多有关 border-radius, text-shadow, and box-shadow的细节请阅读 CSS3的基础知识 [ 英文原文 The Basics of CSS3 ] 。

.button {
display: inline-block;
outline: none;
cursor: pointer;
text-align: center;
text-decoration: none;
font: 14px/100% Arial, Helvetica, sans-serif;
padding: .5em 2em .55em;
text-shadow: 0 1px 1px rgba(0,0,0,.3);
-webkit-border-radius: .5em;
-moz-border-radius: .5em;
border-radius: .5em;
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
-moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
box-shadow: 0 1px 2px rgba(0,0,0,.2);
}
.button:hover {
text-decoration: none;
}
.button:active {
position: relative;
top: 1px;
}

色彩的一般样式

下面的代码是橘黄色的css样式。第一行的background 是一个备用，针对不支持CSS3 的浏览器, 第二行的background是为 Webkit这类浏览器, 第三行的background是为Firefox,最后一行是filter只被Internet Explorer识别。

更多关于 CSS gradient的细节,请看 Cross-Browser CSS Gradient。

.orange {
color: #fef4e9;
border: solid 1px #da7c0c;
background: #f78d1d;
background: -webkit-gradient(linear, left top, left bottom, from(#faa51a), to(#f47a20));
background: -moz-linear-gradient(top,  #faa51a,  #f47a20);
filter:  progid: DXImageTransform.Microsoft.gradient(startColorstr='#faa51a', endColorstr='#f47a20');
}
.orange:hover {
background: #f47c20;
background: -webkit-gradient(linear, left top, left bottom, from(#f88e11), to(#f06015));
background: -moz-linear-gradient(top,  #f88e11,  #f06015);
filter:  progid: DXImageTransform.Microsoft.gradient(startColorstr='#f88e11', endColorstr='#f06015');
}
.orange:active {
color: #fcd3a5;
background: -webkit-gradient(linear, left top, left bottom, from(#f47a20), to(#faa51a));
background: -moz-linear-gradient(top,  #f47a20,  #faa51a);
filter:  progid: DXImageTransform.Microsoft.gradient(startColorstr='#f47a20', endColorstr='#faa51a');
}

如何使用我的按钮?

比如你喜欢蓝色的按钮，并想应用在你的页面:

首先, 复制 .button 和 .blue 的CSS (看 demo source code).

然后, 增加到你想要成为按钮的 HTML 元素 (比如

<a href="#">Button</a>

)，如下图。 CSS 能被应用于 link, p, span, div, input, button, 等元素。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航