Use CSS Animation to Change the Hover State of a Button

Вы можете использовать CSS @keyframes для изменения цвета кнопки в состоянии зависания. Ниже приведен пример изменения ширины изображения при наведении:

<Стиль>
img: hover {
animation-name: width;
продолжительность анимации: 500 мс;
}

Ширина @keyframes {
100% {
ширина: 40 пикселей;
}
}
</ Стиль>

<img src = "https://bit.ly/smallgooglelogo" alt = "Логотип Google" />

Обратите внимание, что ms обозначает миллисекунды, где 1000 мс равно 1 с. Используйте CSS @keyframes чтобы изменить background-color элемента button чтобы он стал #4791d0 когда пользователь #4791d0 на него курсор. Правило @keyframes должно содержать только запись на 100% .