Ховер кнопки градиентным текстом с trasition?

Ссылка скопирована
CSS HTML JavaScript
1 ответ

Кто-нибудь знает еще способы, как по ховеру менять текст на градиент с transition, кроме как через &::before и дата атрибут ?

Пример

Дополнительно:

Через кастомные и @property
https://css-tricks.com/property/

snippet
https://codepen.io/AnnaSummer/pen/jOJMBzm

  • Спасибо, проверил, работает везде, кроме firefox, возможно есть какой-от fallback для него ? чтобы красился например просто в обычный цвет на мозилле ?

    пример

  • Breeze1, потеряли начальные значения кастомок.
    И префиксы стоят от вебкита (ФФ их, конечно, частично понимает, но зачем писать руками префиксы, когда есть автопрефиксер, причем даже на codepen)

    Короче, у вас проблема с градиентом, а не с property.
    В ФФ всё будет работать кроме анимации, не нужен никакой фолбэк.

  • Ankhena, Можете подсказать, какая проблема с градиентом ? Я если честно, не могу понять где ошибка
  • Ankhena, извините, не сразу увидел ваш пример, спасибо большое
  • Breeze1, а я только что его добавила))
Нужно решить такую задачу?

Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.

Заказать помощь
Лучший ответ
1
Дмитрий К. Ответ

Для создания ховер эффекта на кнопках с градиентным текстом и плавным переходом, можно использовать следующий CSS код:

.button {
  background: linear-gradient(45deg, #FF416C, #FF4B2B);
  border: none;
  color: transparent;
  background-clip: text;
  -webkit-background-clip: text;
  transition: color 0.4s;
}
 
.button:hover {
  color: #fff;
}

.button { background: linear-gradient(45deg, #FF416C, #FF4B2B); border: none; color: transparent; background-clip: text; -webkit-background-clip: text; transition: color 0.4s; } .button:hover { color: #fff; }

Этот код создает кнопку с градиентным фоном и текстом, который также имеет градиентный эффект. При наведении курсора на кнопку, цвет текста изменяется на белый с плавным переходом за 0.4 секунды.

Просто добавьте этот CSS код к вашему проекту и примените класс "button" к вашим кнопкам, чтобы получить желаемый эффект. Не забудьте также настроить градиентные цвета и другие стили под свои потребности.

Надеюсь, это поможет вам создать стильные и привлекательные кнопки с ховер эффектом на вашем сайте! Если у вас возникнут дополнительные вопросы, не стесняйтесь задавать. Буду рад помочь!

Другие ответы (0)

Пока нет других ответов. Будьте первым, кто поможет автору.

Ответить на вопрос

комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Вам также может быть интересно

VPN Как правильно настроить vless для Android TV? 1 ответ Pyrogram Как правильно зарегистрировать юзер бота в Telegram? 1 ответ печатные-платы Как заставить запускаться программу M3.exe от компании Hanxing AOI в инспекционной машине на Windows 7 Pro? 1 ответ Figma Баг с переносом слов в Figma? 1 ответ