Плавная анимация градиента при наведении на кнопку

В живую пример можно посмотреть на Codepen

Создадим структуру HTML

Напишем основные стили

Добавим стили для кнопки GRADIENT BUTTON A

Добавим стили для кнопки GRADIENT BUTTON B

Добавим стили для кнопки GRADIENT BUTTON C

Как это работает?

1. Кнопке задаем градиентный фон через свойство background-image: linear-gradient();
2. Устанавливаем размер фона больше, чем размеры кнопки с помощью свойства background-size: 200% auto; (первое значение - ширина фона, второе значение - высота фона)
3. Устанавливаем кнопке свойство transition: 1s; для плавного перехода
4. При наведении на кнопку изменяем положение фона свойством background-position: 100% 0; (первое значение - по горизонтали, второе значение - по вертикали)

Друзья, стараюсь для вас, поддержите проект!

Подписывайтесь, впереди много всего интересного и полезного ;)

Telegram - https://t.me/frontips

VK - https://vk.com/frontips