CSS按钮动画异常：为何dark-btn无从左到右hover动画？

问题根源 #

带.dark-btn类的按钮hover动画失效，是因为你给它的hover状态直接设置了background-color:white !important，这个高优先级样式会完全覆盖掉伪元素::before的滑动效果——伪元素的背景被按钮本身的白色背景遮挡，自然看不到动画。

修复后的完整代码 #

CSS部分 #

* {
  margin:0;
  padding:0;
}

.elementor-button {
    position: relative;
    overflow: hidden;
    background-color: white !important;
    color: black;
    border: 2px solid #00E0FD;
    padding: 12px 24px;
    transition: color 0.3s ease-in-out, border-color 0.3s ease-in-out;
}

/* Hover Effect */
.elementor-button::before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background-color: #00E0FD;
    transition: left 0.4s ease-in-out;
    z-index: -1; /* 确保伪元素在按钮内容下方 */
}

.elementor-button:hover::before {
    left: 0;
}

.elementor-button:hover {
    color: black; /* 确保文字可读 */
}

/* Dark Button Variant */
.dark-btn .elementor-button {
    background-color: black !important;
    color: white;
    border: 2px solid #00E0FD;
}

/* Dark Button Hover Effect */
.dark-btn .elementor-button:hover {
    color: black; /* 只保留文字颜色变化，移除背景色强制覆盖 */
}

.dark-btn .elementor-button::before {
    background-color: white;
}

HTML部分 #

<div style="background:white;height:100px;width:100%">
    <div class="elementor-element elementor-element-02d035e elementor-align-center elementor-mobile-align-justify elementor-widget elementor-widget-button" data-element_type="widget" data-id="02d035e" data-widget_type="button.default">
        <div class="elementor-widget-container">
            <div class="elementor-button-wrapper">
                <a class="elementor-button elementor-button-link elementor-size-sm" href="#"><span class="elementor-button-content-wrapper"><span class="elementor-button-text">See our Case Studies</span></span></a>
            </div>
        </div>
    </div>
</div>

<div style="background:black;height:100px;width:100%">
    <div class="elementor-element elementor-element-02d035e elementor-align-center elementor-mobile-align-justify dark-btn elementor-widget elementor-widget-button" data-element_type="widget" data-id="02d035e" data-widget_type="button.default">
        <div class="elementor-widget-container">
            <div class="elementor-button-wrapper">
                <a class="elementor-button elementor-button-link elementor-size-sm" href="#"><span class="elementor-button-content-wrapper"><span class="elementor-button-text">See our Case Studies</span></span></a>
            </div>
        </div>
    </div>
</div>

关键修改点 #

1. 给伪元素::before添加z-index: -1，明确它位于按钮内容的下方，避免被文字或其他元素遮挡；
2. 移除.dark-btn .elementor-button:hover中的background-color:white !important，让伪元素的滑动动画来实现背景切换效果；
3. 保留文字颜色的过渡，确保hover时文字可读性。

内容的提问来源于stack exchange，提问作者michaelmcgurk