Как сделать плавное изменение цвета кнопки при наведении курсора

Расскажем, как можно сделать анимацию цвета кнопки при наведении двумя способами.

Смотрите видео:

https://vk.com/video-219751701_456239230

VK Видео | YouTube

Почему анимация не работает сразу

При настройке анимации для кнопки может возникнуть ситуация, что эффект не работает. В чем может быть проблема?

Когда мы добавляем кнопку, у нее по умолчанию уже задан параметр Фон.

У кнопки задано значение параметра Фон

Если сразу добавить кнопке анимацию по изменению цвета, то ничего не получится — анимация не затронет заданное значение параметра Фон, т.к. она работает с другим параметром — Цвет фона. Фон останется неизменным, и анимацию мы не увидим.

Задаем кнопке анимацию с эффектом Цвет фона — анимация не работает

Как правильно настроить изменение цвета кнопки

Чтобы анимация цвета кнопки сработала правильно, перед настройкой нужно сделать следующее:

  1. Отключите предустановленную настройку фона у кнопки.

Скроем заданный по умолчанию фон кнопки

  1. Задайте нужный цвет кнопки в параметре Цвет фона.

Задаем параметр Цвет фона

Теперь можно настраивать изменение цвета кнопки. Это можно сделать одним из двух способов.

Способ 1: Через настройки анимации

  1. Скопируйте установленное вами значение цвета фона кнопки.
  2. Добавьте кнопке Анимацию при наведении.

  1. В настройках анимации добавьте Эффект — Цвет фона. Остальные эффекты нужно удалить.

  1. В настройках эффекта вставьте скопированное ранее значение цвета фона в параметр Начало.

Настраиваем цвет фона в начале анимации

  1. Вставьте то же значение в параметр Конец и измените цвет на нужный — например, сделайте его немного светлее.

Настраиваем цвет фона в конце анимации

  1. Установите длительность анимации — например, 0.3 секунды.

Готово! Мы настроили анимацию — цвет кнопки меняется при наведении.

Способ 2: Через селекторы состояний

  1. Добавьте кнопке состояние При наведении (Hover).

Добавляем состояние при наведении

  1. В этом состоянии измените цвет фона на нужный — например, более светлый.

Меняем цвет фона в состоянии при наведении

  1. Добавьте Переход (Transition) для плавного изменения цвета — например, на 300 миллисекунд.

Добавляем Переход 300ms

  1. Вернитесь в состояние По умолчанию и также добавьте переход на 300 миллисекунд для плавной обратной анимации.

Добавляем Переход в состоянии По умолчанию

Готово! Мы настроили плавное изменение цвета кнопки при наведении с помощью селекторов состояний.

Резюме

Два способа сделать плавное изменение цвета кнопки при наведении:

  • Добавить Анимацию при наведении с эффектом Цвет.
  • Настроить состояние При наведении.

Важно: перед настройкой не забудьте скрыть заданный по умолчанию у кнопки параметр Фон.