CSS mix-blend-mode: difference – How to make text switch from black to white over a red background?

I’m working on a button using Elementor HTML structure:

<a class="elementor-button elementor-button-link elementor-size-sm" href="#"> <span class="elementor-button-content-wrapper"> <span class="elementor-button-text">Click here</span> </span> </a>

Requirements:

Default background: white (#FFF), text: black (#000).

On hover, a pseudo ::before element with red (#E7000B) slides in.

Text over the red background should turn white (#FFF).

Text outside the red area remains black.

I want 1 layer of text/icon only – no separate layers, no gradient hack.

Here’s my current SCSS:

.elementor-button { position: relative; background-color: transparent; overflow: hidden; isolation: isolate; display: inline-flex; padding: 1.14rem 1.5rem; &::before { content: ''; position: absolute; top: 0; left: 0; height: 100%; min-width: 10%; aspect-ratio: 1 / 1; background-color: #E7000B; transition: all 0.5s ease-in-out; } &:hover, &:focus{ &:before { min-width: 100%; } } .elementor-button-content-wrapper { position: relative; z-index: 1; mix-blend-mode: difference; color: #000000; } }

Problems I’m facing:

On hover, text over the red background sometimes doesn’t turn white as expected (depends on the page background).

I want the blending to only affect the button so that text always switches black outside, white inside the sliding red pseudo element.

Questions:

How can I make mix-blend-mode: difference reliably switch black → white over a red background, without affecting the rest of the page?

Is there any technique alternative to mix-blend-mode to achieve the same effect with 1 layer of text changing color according to a sliding pseudo element?

Thanks in advance!