按钮动画效果

 <style>
        #btn{
            width: 50px;
            height: 20px;
            position: relative;
        }
        #btn>button{
            width: 50px;
            height: 20px;
            background: #1e50ae
        }
        #btn>div{
            width: 0;
            height: 20px;
            background: rgba(255, 255,255, .7);
            position: absolute;
            left: 0;
            top: 0;
            transition: width .3s linear;
        }
        #btn:hover>div{width: 100%;}
    </style>
</head>
<body>
    <div id="btn">
        <button>MORE</button>
        <div></div>
    </div>
</body>
</html>
posted @ 2023-06-30 10:07  曾像夜那么黑  阅读(141)  评论(0)    收藏  举报