平时在网页制作中若背景图片或按钮带渐变效果时，大部分情况下都需要图片作为背景，如果需要有鼠标滑动效果，可能还需要两张图片。

今天教大家不使用图片制作出精美的web按钮，而且兼容IE6。

如下示例：

(1)垂直渐变

样式：

.box
{
color:#fff;
width: 200px;
height: 80px;
text-align: center;
line-height: 80px;
font-size: 20px;
filter: progid:DXImageTransform.Microsoft.Gradient(startColorStr='#FF0000',endColorStr='#F9F900',gradientType='0');
background: -moz-linear-gradient(top, #FF0000, #F9F900);
background: -o-linear-gradient(top,#FF0000, #F9F900);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#FF0000), to(#F9F900));
}

(2)线性渐变web按钮

.btn{
display:inline-block;
font:bold 12px/12px HelveticaNeue, Arial;
padding:8px 11px;
color:#555;
border:1px solid #dedede;
-webkit-border-radius:3px;
-moz-border-radius:3px;
border-radius:3px; 
cursor:pointer;
}

.button.purple{
background:#dfaeda;
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#e8c4e4', endColorstr='#d494ce'); /*  IE */
background:-webkit-gradient(linear, left top, left bottom, from(#e8c4e4), to(#d494ce)); /*  WebKit */
background:-moz-linear-gradient(top,  #e8c4e4, #d494ce);
border-color:#bc9db9 #ad89aa #a1799d;
color:#7b5777;
text-shadow:0 1px 0 #eacae6;
-webkit-box-shadow:0 1px 1px #d5d5d5, inset 0 1px 0 #eed3eb;
-moz-box-shadow:0 1px 1px #d5d5d5, inset 0 1px 0 #eed3eb;
box-shadow:0 1px 1px #d5d5d5, inset 0 1px 0 #eed3eb;   
}