2

Есть такая кнопка

введите сюда описание изображения

.header {
    background-image: url(https://wallbox.ru/resize/640x480/wallpapers/main2/201717/art-ogni-kosmos-zvezdy-uzory-tumannost-rossyp-mercanie.jpg);
    height: 100vh;
}
.header__btn {
    border: 1px solid #fff;
    border-radius: 3px;
    padding: 6px 28px;
    text-transform: uppercase;
    color: #fff;
    background-color: transparent;
    transition: 0.5s all;
}

.header__btn:hover {
    color: transparent;
    background-color: #fff;
    transition: 0.5s all;
}
<header class="header">
<button class="header__btn">купить</button>
</header>

Как сделать чтобы текст при наведении стал прозрачным?

2
  • Вы хотите, чтобы текст вёл себя как дырка в кнопке? Типа кнопка стала белой, а через текст был виден космос под кнопкой? 4 фев 2021 в 8:49
  • @ЕгорБанин Да, всё верно!
    – Krovorgen
    4 фев 2021 в 8:50

2 ответа 2

5

Для реализации вашей задумки на 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 или негативно влияют на производительность. Текст увеличен для наглядности.

2

В css есть mask. Можно попробовать его. Но эта фича поддерживается не всеми браузерами. Или можно использовать svg:

div {
    padding: 1em;
    background-color: blue;
}
button {
    background-color: transparent;
}
svg {
    width: 100px;
    height: 50px;
}
.btnBg {
    fill: red;
}
<div>
    <button>
        <svg>
            <defs>
                <mask id="mask">
                    <rect width="100%" height="100%" fill="white"></rect>
                    <text x="50%" y="50%" text-anchor="middle" fill="black">test</text>
                </mask>
            </defs>
            <rect class="btnBg" width="100%" height="100%" mask="url(#mask)"></rect>
        </svg>
    </button>
</div>

Я состряпал это по доке на MDN. У них очень неплохая документация по веб-технологиям. Рекомендую.

При наведении вам надо просто инвертировать цвета маски. Текст станет непрозрачным (белым), а фон прозрачным (чёрным).

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.