@Norum

Как поменять цвет заднего фона на градиент через transition?

Как сделать так, чтобы фоновый цвет плавно сменялся на градиент при наведении на стрелку? Задал стрелкам transition: 0.3s, но в итоге не работает.
a.prev,
a.next {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 25px !important;
  font-weight: 800 !important;
  background-color: #ffffff;
  outline: 1px solid #eeeeee;
  border-radius: 100%;
  width: 40px !important;
  height: 40px !important;
  position: static !important;
  transition: 0.3s;
}
a.prev span,
a.next span {
  transform: translateY(-5%);
}
a.prev:hover,
a.next:hover {
  color: #fff;
  background: linear-gradient(90deg, #fd712c 0%, #f21780 100%);
  box-shadow: 0px 5px 20px -3px rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(0, 0, 0, 0.09);
  box-sizing: border-box !important;
}


6098587adbacf025736503.jpeg

Сам сайт tempessj.beget.tech
  • Вопрос задан
  • 60 просмотров
Решения вопроса 1
RomanTRS
@RomanTRS
Можно схитрить добавив внутренний оверлей с градиентом. И показывать его при наведении.

a.prev,
a.next {
  background-color: #ffffff;
  position: relative;
  overflow: hidden;
}
a.prev::after,
a.next::after {
  content: '';
  background-image: linear-gradient(90deg, #fd712c 0%, #f21780 100%);
  position: absolute;
  z-index: -1;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}
a.prev:hover,
a.next:hover {
  color: #fff;
  background-color: transparent;
}
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы