css中鼠标悬停背景色从左到右_hover后背景颜色从左边开始布满-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_51218646/article/details/122512881

本文介绍了如何使用CSS实现按钮在鼠标悬停时背景色从左到右平滑过渡的效果。通过在按钮元素前后添加伪元素before和after，并在鼠标悬停时改变伪元素的宽度，配合transition属性实现背景颜色的渐变动画。同时，文章强调了after伪元素的重要性，用于避免按钮背景透明导致的视觉问题。

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

设计思路：

在btn按钮的前后都加上伪元素before和after元素（宽度为0，不显示出来）
为鼠标添加hover，当鼠标悬停上去的时候给伪元素都设置宽度为100%
为其中之一的伪元素增加过渡效果transition，并且设置背景颜色
另一个伪元素不用设置过渡，得到立马变化的效果

keys:

before和after一直在最下方

如果没有after的话会导致，btn的背景为透明会出现看着before从左到右变化

animation

解决方法就是增加after元素，并且设置背景色与原先btn背景色一致

animationww

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