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

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

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

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

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

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

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

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

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

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

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

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

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

Скопируйте установленное вами значение цвета фона кнопки.

Добавьте кнопке Анимацию при наведении.

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

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

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

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

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

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

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

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

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

Резюме

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

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

Настроить состояние При наведении.