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

最新推荐文章于 2024-05-28 15:36:43 发布

李逸风

最新推荐文章于 2024-05-28 15:36:43 发布

阅读量2.4w

点赞数 7

分类专栏： CSS 文章标签： css3 按钮 hover颜色渐变

本文链接：https://blog.csdn.net/sheng_li/article/details/75004017

版权

CSS 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

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

运行的效果图是这样的：

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

<!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>

李逸风

关注

7
点赞
踩
12

收藏

觉得还不错? 一键收藏
0
评论
css3 鼠标hover事件背景颜色渐变

由于经常会用到写按钮的一些样式，经常要重新写，不如保存一次，以后直接到这里拿。 *{margin: 0; padding: 0;} .container{ margin: 0 auto; padding-top: 30px;
复制链接

扫一扫

专栏目录