Как анимировать фоновый градиент кнопки
Анимировать фоновый градиент кнопки (или любого другого элемента) - непростая задача. Функция linear-gradient применяется к свойству background-image. Если, например, при наведении курсора вы меняете значения linear-gradient, вы не можете применить переход и анимировать фон (изменение будет мгновенным, даже если вы примените переход).
Что вы можете сделать, так это создать градиент фона, который больше, чем сама кнопка (используя свойство background-size), а затем анимировать свойство background-position для перевода фона.
Градиент кнопка
Анимированная кнопка HTML
<button class="reset anim-bg-gradient">Animated Button</button>
Кнопка с градиентом CSS
.anim-bg-gradient {
background: linear-gradient(120deg, darkmagenta, crimson, orange);
background-size: 200% 100%;
background-position: 100% 0;
transition: background-position .5s;
border: 0;
padding: 20px 30px;
color: white;
font-size: 2rem;
border-radius: 10px;
cursor: pointer;
}
.anim-bg-gradient:hover {
background-position: 0 0;
}
Вот и всё!
Ссылка на автора - twitter.com/guerriero_se !
