首页 > 代码库 > 纯css3实现按钮的 hover 和 active 时颜色的明暗变化效果

纯css3实现按钮的 hover 和 active 时颜色的明暗变化效果

2024-09-07 11:15:48   216人阅读

效果：在任意HTML标签上增加样式类 f-color-control 就可以为此元素增加hover和avtive时颜色的变化;

技术分享

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .btn{
            width: 80px;
            line-height: 30px;
            cursor:pointer;
            padding: 12px;
            text-align: center;
            font-size: 20px;
            color: #fff;
        }
        .f-color-control{
            transform: scale(1);
            border-radius:6px;
            background-color: #ff6700;
        }
        .f-color-control:before{
            position: absolute;
            top: 0;  right: 0;  bottom: 0;  left: 0;
            z-index:-1;
            border-radius:6px;
            background:rgba(0,0,0,.1);
        }
        .f-color-control:after{
            position: absolute;
            top: 0; right: 0; bottom: 0; left: 0;
            z-index:-1;
            border-radius:6px;
            background:rgba(255,255,255,.3);
        }
        .f-color-control:hover:before{
            content:"";
        }
        .f-color-control:active:after{
            content:"";
        }
    </style>
</head>
<body>
<div>
    <div class="btn f-color-control">登录</div>
</div>
</body>
</html>

 

纯css3实现按钮的 hover 和 active 时颜色的明暗变化效果


联系
我们