Как сделать плавное изменение цвета кнопки при наведении курсора
Расскажем, как можно сделать анимацию цвета кнопки при наведении двумя способами.
Смотрите видео:
https://vk.com/video-219751701_456239230
Почему анимация не работает сразу
При настройке анимации для кнопки может возникнуть ситуация, что эффект не работает. В чем может быть проблема?
Когда мы добавляем кнопку, у нее по умолчанию уже задан параметр Фон.
Если сразу добавить кнопке анимацию по изменению цвета, то ничего не получится — анимация не затронет заданное значение параметра Фон, т.к. она работает с другим параметром — Цвет фона. Фон останется неизменным, и анимацию мы не увидим.
Как правильно настроить изменение цвета кнопки
Чтобы анимация цвета кнопки сработала правильно, перед настройкой нужно сделать следующее:
- Отключите предустановленную настройку фона у кнопки.
- Задайте нужный цвет кнопки в параметре Цвет фона.
Теперь можно настраивать изменение цвета кнопки. Это можно сделать одним из двух способов.
Способ 1: Через настройки анимации
- Скопируйте установленное вами значение цвета фона кнопки.
- Добавьте кнопке Анимацию при наведении.
- В настройках анимации добавьте Эффект — Цвет фона. Остальные эффекты нужно удалить.
- В настройках эффекта вставьте скопированное ранее значение цвета фона в параметр Начало.
- Вставьте то же значение в параметр Конец и измените цвет на нужный — например, сделайте его немного светлее.
- Установите длительность анимации — например, 0.3 секунды.
Готово! Мы настроили анимацию — цвет кнопки меняется при наведении.
Способ 2: Через селекторы состояний
- Добавьте кнопке состояние При наведении (Hover).
- В этом состоянии измените цвет фона на нужный — например, более светлый.
- Добавьте Переход (Transition) для плавного изменения цвета — например, на 300 миллисекунд.
- Вернитесь в состояние По умолчанию и также добавьте переход на 300 миллисекунд для плавной обратной анимации.
Готово! Мы настроили плавное изменение цвета кнопки при наведении с помощью селекторов состояний.
Резюме
Два способа сделать плавное изменение цвета кнопки при наведении:
- Добавить Анимацию при наведении с эффектом Цвет.
- Настроить состояние При наведении.
Важно: перед настройкой не забудьте скрыть заданный по умолчанию у кнопки параметр Фон.