CCS3制作时尚美观的渐变按钮

上文介绍了CSS渐变的跨浏览器实现，本文将介绍CSS渐变的实际应用，点击查看一系列纯CSS制作的渐变按钮。这些按钮都是根据字体大小可伸缩的，可以通过改变

padding

和

font-size

来调整按钮大小。这种方法最大的好处是可以应用到任何HTML元素，如

div

、

span

、

p

、

a

、

button

、

input

等。





CSS3渐变、阴影按钮

这些按钮的特别之处

纯CSS:没有图片和Javascript
渐变跨浏览器支持(IE, Firefox 3.6, Chrome, and Safari)
三种按钮状态：正常，悬停，激活
可以应用在任何HTML元素：a、input、button、span、div、p、h3,等等
预留退路：如果用户代理不支持CSS 3，则显示没有渐变和阴影的普通按钮

不同浏览器下预览

下面的图片展示了按钮在不同浏览器中的显示效果。





CSS3按钮在不同浏览器下的显示效果

按钮状态

正常状态：有边框的渐变和阴影
鼠标悬停：比较暗的渐变
鼠标按下：翻转渐变，1xp下沉，更深的字体颜色





CSS3按钮状态

按钮样式
下面的代码是.button类的一般样式，

padding

和

border-radius

使用em单位，可以使按钮根据

font-size

伸缩。要调整按钮大小，改变

border-radius

、

font-size

、

padding

值即可。例如：可以痛缩小字号（

font-size

）和内边距（

padding

）创建稍小的按钮（查看演示）。
关于

border-radius

、

text-shadow

、

box-shadow

更多详情，请查看CSS
3 基础。

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

}





CCS3按钮通用样式

渐变色样式

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

.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');

}

 





CSS按钮颜色样式

直接使用演示中的按钮

假设你想在你的网页中使用蓝色的按钮：
首先，查看演示页面源代码，拷贝

.button

、

.blue

样式；
然后，在想使用按钮的元素上添加

class="button blue"

，CSS类可以应用于任何元素。