Для реализации вашей задумки на CSS, нужно вмешаться и в HTML. А, именно - обернуть текст в <span>
. Далее, при наведении, просто меняем background-color у <button>
и цвет text-shadow у <span>
:
.header {
background-color: red;
background-image: url(https://wallbox.ru/resize/640x480/wallpapers/main2/201717/art-ogni-kosmos-zvezdy-uzory-tumannost-rossyp-mercanie.jpg);
height: 100vh;
}
.header__btn {
color: #f0f; /* Основной цвет */
padding: 6px 28px;
border: 1px solid currentColor;
border-radius: .15em;
font: bold 96px 'Arial Black';
text-transform: uppercase;
background-color: transparent;
transition: background-color 1s ease-in-out;
}
.header__btn:hover { background-color: currentColor; }
.header__btn span {
background-image: url(https://wallbox.ru/resize/640x480/wallpapers/main2/201717/art-ogni-kosmos-zvezdy-uzory-tumannost-rossyp-mercanie.jpg);
background-position: -28px -6px; /* Смещение фона на величину отступов */
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
text-shadow: 0 0 0 currentColor;
transition: text-shadow 1s ease-in-out;
}
.header__btn:hover span { text-shadow: 0 0 0 transparent; }
<header class="header">
<button class="header__btn"><span>купить</span></button>
</header>
Анимация именно text-shadow выбрана потому, что остальные свойства или не дружат с transition или негативно влияют на производительность. Текст увеличен для наглядности.