渐变按钮我们经常可以见到，为按钮定义渐变效果，可以为页面的用户体验添色不少。大多数情况下，我们都是使用线性渐变来实现渐变按钮。

实现代码如下：

在线测试
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        div
        {
            width:100px;
            height:36px;
            line-height:36px;
            text-align:center;
            border:1px solid #DADADA;
            border-radius:5px;
            font-family: "微软雅黑";
            cursor:pointer;
            background: linear-gradient(to bottom,#F8F8F8,#DCDCDC);
        }
        div:hover
        {
            color:white;
            background:linear-gradient(to bottom,#FFC559,#FFAF19)
        }
    </style>
</head>
<body>
    <div>渐变按钮</div>
</body>
</html>

默认情况下，预览效果如下图所示。

当鼠标移到元素上面，此时预览效果如下图所示。