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

Question

[Norum]

Как сделать так, чтобы фоновый цвет плавно сменялся на градиент при наведении на стрелку? Задал стрелкам 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;
}

Сам сайт tempessj.beget.tech

Comments

[Антон Литвиненко]

Градиент не анимируется. Можно попробовать через background-position.

[Norum]

Антон Литвиненко, а если через псевдоэлемент?

[Антон Литвиненко]

Norum, не важно через что. Делается бекграунд, размером больше чем видимая часть. И при ховере меняется background-position, грубо говоря фон смещается по одной из осей. Мне с телефона сложно искать, этого полно в гугле

Answer 1

[Роман]

Можно схитрить добавив внутренний оверлей с градиентом. И показывать его при наведении.

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;
}