Cacher is the code snippet organizer for pro developers

渐变按钮的通用实现

HTML结构为一个简单链接（视情况去掉IE的虚线框）。

<a href="#" class="button">我是一个按钮</a>

对应的样式如下：

.buttom {
    display: block;
    width: 153px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    font-size: 14px;
    font-weight: bold;
    color: #FFF;
    border-radius: 5px;
    /* IE6,7*/
    filter:alpha(opacity=100 finishopacity=100 style=1 startx=0,starty=0,finishx=0,finishy=40) progid:DXImageTransform.Microsoft.gradient(startcolorstr=#09bcfe,endcolorstr=#03a1fc,gradientType=0);

    /* IE8*/
    -ms-filter:alpha(opacity=100 finishopacity=100 style=1 startx=0,starty=0,finishx=0,finishy=40) progid:DXImageTransform.Microsoft.gradient(startcolorstr=#09bcfe,endcolorstr=#03a1fc,gradientType=0);

    background: #03a1fc;
    background: -moz-linear-gradient(top, #09bcfe, #03a1fc);
    background: -webkit-gradient(linear, 0 0, 0 100%, from(#09bcfe), to(#03a1fc));
    text-decoration: none;
}

.buttom:visited {
    color: #FFF;
}

.buttom:hover {
    /* IE6,7*/
    filter:alpha(opacity=100 finishopacity=100 style=1 startx=0,starty=0,finishx=0,finishy=40) progid:DXImageTransform.Microsoft.gradient(startcolorstr=#6acff9,endcolorstr=#46baf7,gradientType=0);

    /* IE8*/
    -ms-filter:alpha(opacity=100 finishopacity=100 style=1 startx=0,starty=0,finishx=0,finishy=40) progid:DXImageTransform.Microsoft.gradient(startcolorstr=#6acff9,endcolorstr=#46baf7,gradientType=0);

    background: #46baf7;
    background: -moz-linear-gradient(top, #6acff9, #46baf7);
    background: -webkit-gradient(linear, 0 0, 0 100%, from(#6acff9), to(#46baf7));
    text-decoration: none;
}

.buttom:active {
    /* IE6,7*/
    filter:alpha(opacity=100 finishopacity=100 style=1 startx=0,starty=0,finishx=0,finishy=40) progid:DXImageTransform.Microsoft.gradient(startcolorstr=#1da5fb,endcolorstr=#0ac1fd,gradientType=0);

    /* IE8*/
    -ms-filter:alpha(opacity=100 finishopacity=100 style=1 startx=0,starty=0,finishx=0,finishy=40) progid:DXImageTransform.Microsoft.gradient(startcolorstr=#1da5fb,endcolorstr=#0ac1fd,gradientType=0);

    background: #0ac1fd;
    background: -moz-linear-gradient(top, #1da5fb, #0ac1fd);
    background: -webkit-gradient(linear, 0 0, 0 100%, from(#1da5fb), to(#0ac1fd));
    text-decoration: none;
}