首页 > 代码库 > 按钮效果

按钮效果

2024-10-11 17:24:39   216人阅读

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

按钮效果


联系
我们