HTML5+CSS3从入门到精通之纯CSS3实现按钮的 hover 和 active 时颜色的明暗变化效果-职坐标

HTML5+CSS3从入门到精通之纯CSS3实现按钮的 hover 和 active 时颜色的明暗变化效果

沉沙 2019-05-15 来源：阅读 1708 评论 0

摘要：本篇文章探讨了HTML5+CSS3从入门到精通之纯CSS3实现按钮的 hover 和 active 时颜色的明暗变化效果，希望阅读本篇文章以后大家有所收获，帮助大家对相关内容的理解更加深入。

本篇文章探讨了HTML5+CSS3从入门到精通之纯CSS3实现按钮的 hover 和 active 时颜色的明暗变化效果，希望阅读本篇文章以后大家有所收获，帮助大家对相关内容的理解更加深入。

HTML5+CSS3从入门到精通之纯CSS3实现按钮的 hover 和 active 时颜色的明暗变化效果

效果：在任意HTML标签上增加样式类 f-color-control 就可以为此元素增加hover和avtive时颜色的变化;
代码如下：
<!DOCTYPE html>
<html>
<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>