鼠标经过按钮，背景颜色出现渐变的效果

<style type="text/css">
    .btn{
        padding:15px 40px;
        background: red;
        border-style: none;
        color:white;
        font-size: 16px;
        cursor: pointer;
        transition: all 1s ease 0s;
        -o-transition: all 1s ease 0s;
        -moz-transition: all 1s ease 0s;
        -webkit-transition: all 1s ease 0s;
    }
    .btn:hover{
        background: blue
    }
</style>
<button type="button" class="btn">鼠标经过</button>