CSS3实现button:hover时background-color从左慢慢移动到右边

最新推荐文章于 2023-03-02 16:46:56 发布

草巾冒小子

最新推荐文章于 2023-03-02 16:46:56 发布

阅读量2.2k

点赞数 3

分类专栏： CSS 3

原文链接：https://blog.csdn.net/ann295258232/article/details/90059607

版权

CSS 3 专栏收录该内容

60 篇文章 3 订阅

订阅专栏

CSS3实现button:hover时背景色从左向右慢慢移动(慢动画)

<!DOCTYPE html>
<html lang="en">
    <head>
        <style>
            .btn{
                position: relative;
                width: auto;
                min-width: 120px;
                padding: 10px;
                text-align: center;
                color: #fff;
                background: #00d463;
                cursor: pointer;
                border-radius: 4px;
                border: none;
            }

            .btn:after,.btn:before {
                content: '';
                position: absolute;
                left: 0;
                top: 0;
                width: 0;
                height: 100%;
                background: #00d463;
                z-index:-2;
                border-radius: 4px;
            }

            .btn:hover{
                z-index:1;
                background:transparent;
            }            
          
            .btn:before {
                transition: .3s;
                background: #14ae5c;
                z-index:-1;
            }          

            .btn:hover:after,.btn:hover:before {
                width: 100%;
            }
          

        </style>
    </head>
    <body>
        <button class="btn">Try Free</button>
    </body>
</html>

免责说明：（上述代码版权声明）
版权声明：本文为CSDN博主「向着光芒的女孩之littleAnn」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/ann295258232/article/details/90059607

以上就是关于“ CSS3实现button:hover时background-color从左慢慢移动到右边 ” 的全部内容。

草巾冒小子

关注

3
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
CSS3实现button:hover时background-color从左慢慢移动到右边

CSS3实现button:hover时background-color从左慢慢移动到右边<!DOCTYPE html><html lang="en"> <head> <style> .btn{ position: relative; ...
复制链接

扫一扫