css3鼠标hover事件背景颜色渐变

17-07-13 来源：[db:作者]

收藏我要投稿

由于经常会用到写按钮的一些样式，经常要重新写，不如保存一次，以后直接到这里拿。

运行的效果图是这样的：

这是全部的代码，直接复制走就可以运行了。

<!DOCTYPE html>  
<html lang="en">  
    <head>  
        <meta charset="utf-8">  
        <style type="text/css">  
            *{margin: 0; padding: 0;}  
            .container{  
                margin: 0 auto;   
                padding-top: 30px;   
                width: 1000px;  
            }  
            .btn{  
                display: inline-block;   
                padding: 0 30px;   
                width: auto;   
                height: 35px;   
                font: 14px/35px 'microsoft yahei';   
                color: #fff; border: 0;   
                border-radius: 3px;   
                text-align: center;   
                cursor: pointer;   
                -webkit-transition: all .5s;   
                -moz-transition: all .5s;   
                -ms-transition: all .5s;   
                -o-transition: all .5s;   
                transition: all .5s;  
            }  
            .blueBtn{  
                background: #5dcbff;  
            } /*蓝色按钮*/  
            .blueBtn:hover{  
                background: #40b6ee;  
            }  
            .orangeBtn{  
                background: #ff5700;  
            }/*橙色按钮*/  
            .orangeBtn:hover{  
                background: #e25d18;  
            }  
            .violetBtn{  
                background: #6680ff;  
            }/*紫色按钮*/  
            .violetBtn:hover{  
                background: #425de0;  
            }  
            .grayBtn{  
                background: #999;  
            }/*灰色按钮*/  
            .grayBtn:hover{  
                background: #7f7f7f;  
            }  
        </style>   
    </head>  
    <body>  
        <div class="container">  
            <span class="btn blueBtn">蓝色按钮</span>  
            <span class="btn orangeBtn">橙色按钮</span>  
            <span class="btn violetBtn">紫色按钮</span>  
            <span class="btn grayBtn">灰色按钮</span>  
        </div>  
    </body>  
</html>

点击复制链接与好友分享!回本站首页