Как сделать цвет текста кнопки белым? ⇐ CSS

[Anonymous]

Код кнопки есть, изначально цвет текста кнопки должен быть белым.
Если фон темный, все работает

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

section {
padding: 3rem 2rem;
background-color: #111;
}

section.bg-gradient {
background: linear-gradient(104.37deg, #4c80dd 6%, #9542b1 100%);
}

button {
cursor: pointer;
min-height: 56px;
color: #fff;
border: 1px solid #fff;
background-color: transparent;
padding: 15px 36px;
font-size: 16px;
letter-spacing: -0.05em;
text-transform: uppercase;
text-decoration: none;
appearance: none;
box-shadow: none;
transition: opacity 0.3s ease;
overflow: hidden;
position: relative;
}

button::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #fff;
transform: translateX(-50%);
transition: transform 0.3s cubic-bezier(0.7, 0, 0.2, 1);
}

button span {
position: relative;
mix-blend-mode: difference;
}

button:hover::before {
transform: translateX(0%);
}

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

Button 1


Button 2

Когда фон имеет градиент (это не фон для кнопки, кнопка имеет прозрачный фон), цвет текста кнопки должен быть белым
Как решить эту проблему?

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