按钮效果

weixin_30622107

于 2017-06-25 13:38:00 发布

阅读量63

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/langwo/p/7076630.html

本文介绍了一种使用CSS实现的按钮悬停效果。通过伪元素和过渡效果，当鼠标悬停在按钮上时，按钮背景颜色会发生变化，并从顶部和底部出现渐变颜色覆盖效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .mybtn{
            display: inline-block;
            padding: 5px 8px;
            border: .5px solid #e8e8e8;
            border-radius: 5px;
            color: #3a3a3a;
            position: relative;
            overflow: hidden;
        }
        .mybtn::after{
            content: "";
            position: absolute;
            width: 100%;
            height: 100%;
            bottom: 100%;
            left: 0;
            opacity: .8;
            transition: all .5s ease-out .1s;
        }
        .mybtn:before{
            content: "";
            position: absolute;
            width: 100%;
            height: 50%;
            top: 100%;
            left: 0;
            opacity: .8;
            transition: all .5s ease-out .1s;
        }
        .mybtn:hover{
            border: .5px solid #e9e9e9;
            background-color: #e1e1e1;
            cursor: pointer;
        }
        .mybtn:hover::before{
            background-color: #4b6eb1;
            top: 50%;
        }
        .mybtn:hover::after{
            background-color: #4b6eb1;
            bottom: 50%;
        }
        .mybtn:active{
            border: .5px solid #d4d4d4;
            background-color: #cbcbcb;
        }
    </style>
</head>
<body>

<div class="mybtn">按钮效果</div>

</body>
</html>