Is there any reason why my first button animates left to right but my 'dark-btn' doesn't?

Here's my JSFiddle / and I've embedded the code.

* {
  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, background-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;
    mix-blend-mode: multiply; /* Keeps text visible */
}

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

.elementor-button:hover {
    color: black; /* Ensure text is readable */
}

/* 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 {
    background-color: white !important;
    color: black;
}

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

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

Is there any reason why my first button animates left to right but my 'dark-btn' doesn't?

Here's my JSFiddle https://jsfiddle/Ld41puh7/ and I've embedded the code.

* {
  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, background-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;
    mix-blend-mode: multiply; /* Keeps text visible */
}

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

.elementor-button:hover {
    color: black; /* Ensure text is readable */
}

/* 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 {
    background-color: white !important;
    color: black;
}

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

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

• css

1 Answer 1

Your problem is the mix-blend-mode: multiply; that works well with your original background, but not with your dark button background.

An easier solution would be to move the background under the text, instead of use a pseudo-element. Use a linear gradient of 2 colors (base and hover) with a size of 200% button's width. On hover move the position of the background to the other color.

* {
  margin: 0;
  padding: 0;
}

body {
  padding: 2rem;
}

.elementor-button {
  --base-color: white;
  --hover-color: #00E0FD;
  --text-color: black;

  position: relative;
  color: var(--text-color);
  border: 2px solid #00E0FD;
  padding: 12px 24px;
  transition: color 0.3s ease-in-out, border-color 0.3s ease-in-out, background-position 0.4s ease-in-out;

  background: linear-gradient(to right,
      var(--hover-color) 50%,
      var(--base-color) 50%);
  background-size: 200%;
  background-position: 100%;
}

.elementor-button:hover {
  background-position: 0%;
}

/* Dark Button Variant */
.dark-btn .elementor-button {
  --base-color: black;
  --hover-color: white;
  --text-color: white;
}

/* Dark Button Hover Effect */
.dark-btn .elementor-button:hover {
  --text-color: black;
}

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