按钮渐变色样式

CCS3按钮通用样式

渐变色样式

下面是橙色按钮的样式代码。第一个背景设置是为不支持CSS 3的浏览器预留的退路，第二个针对Webkit浏览器，第三个针对Firefox，最后一个是仅能被IE识别的渐变滤镜。

关于CSS渐变的更多详情，请查看CSS渐变跨浏览器实现一文。

.orange {

color:#fef4e9;

border:solid1px#da7c0c;

background:#f78d1d;

background: -webkit-gradient(linear,lefttop,leftbottom, 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,lefttop,leftbottom, 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,lefttop,leftbottom, from(#f47a20), to(#faa51a));

background: -moz-linear-gradient(top,#f47a20,#faa51a);

filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#f47a20', endColorstr='#faa51a');

}