CSS-Mix-Blend-Modus – Wie lässt sich Text auf einem roten Hintergrund von Schwarz auf Weiß umschalten? ⇐ CSS

[Anonymous]

Ich arbeite an einer Schaltfläche mit der Elementor-HTML-Struktur:

Code: Select all

[url=#]

Click here

[/url]


.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;
}
}

Anforderungen:

• Standardhintergrund: weiß (#FFF), Text: schwarz (#000).
• Beim Schweben gleitet ein Pseudo-:before-Element mit rot (#E7000B) in.
• Text über dem roten Hintergrund sollte weiß (#FFF) werden.
• Text außerhalb des roten Bereichs bleibt schwarz.
• Ich möchte nur 1 Ebene Text/Symbol – keine separaten Ebenen, keinen Farbverlauf-Hack.

Probleme, mit denen ich konfrontiert bin:

• Beim Hover wird Text über dem roten Hintergrund manchmal nicht wie erwartet weiß (abhängig vom Seitenhintergrund).
• Ich möchte, dass sich die Überblendung nur auf die Schaltfläche auswirkt, sodass der Text immer schwarz wird außen, weiß innen das verschiebbare rote Pseudoelement.

Fragen:

• Wie kann ich mix-blend-mode: den Unterschied machen schwarz → weiß zuverlässig über einen roten Hintergrund wechseln, ohne den Rest der Seite zu beeinflussen?
• Gibt es welche? Technik Alternative zum Mix-Blend-Modus, um den gleichen Effekt mit 1 Textebene zu erzielen, die die Farbe entsprechend einem verschiebbaren Pseudoelement ändert?

Vielen Dank im Voraus!