Режим смешивания CSS: разница – Как переключить текст с черного на белый на красном фоне? ⇐ CSS

[Anonymous]

Я работаю над кнопкой, используя HTML-структуру Elementor:

Код: Выделить всё

[url=#]

Click here

[/url]

Требования:

• Фон по умолчанию: белый (#FFF), текст: черный (#000).
• При наведении псевдо-элемент ::before со слайдами красного (#E7000B) in.
• Текст на красном фоне должен стать белым (#FFF).
• Текст за пределами красной области остается черным.
• Мне нужен только 1 слой текста/значка – без отдельных слоев, без градиента hack.

Вот мой текущий 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;
}
}

Проблемы, с которыми я столкнулся:

• При наведении курсора мыши текст на красном фоне иногда не становится белым, как ожидалось (зависит от фона страницы).
• Я хочу, чтобы смешивание влияло только на кнопку, чтобы текст всегда переключался черный снаружи на белый внутри скользящего красного псевдоэлемента.

Вопросы:

• Как сделать mix-blend-mode: разница надежно переключать черный → белый на красном фоне, не затрагивая остальную часть страницы?
• Есть ли какая-нибудь техника Альтернатива режиму смешивания для достижения того же эффекта с 1 слоем текста, меняющим цвет в соответствии с скользящим псевдоэлементом?

Заранее спасибо!

Подробнее здесь: https://stackoverflow.com/questions/798 ... -white-ove