Вы можете использовать CSS @keyframes, чтобы изменить цвет кнопки при наведении курсора.
Вот пример изменения ширины изображения при наведении курсора:
<style>
img:hover {
animation-name: width;
animation-duration: 500ms;
}
@keyframes width {
100% {
width: 40px;
}
}
</style>
<img src="https://bit.ly/smallgooglelogo" alt="Google's Logo" />
Обратите внимание, что ms означает миллисекунды, где 1000 мс равно 1 секунде
Задание:
Используйте CSS @keyframes, чтобы изменить цвет фона кнопки, чтобы он стал #4791d0, когда пользователь наводит на него курсор. Правило @keyframes должно иметь запись только для 100%
- Правило @keyframes должно имя анимации background-color.
- В @keyframes должно быть одно правило, которое меняет цвет фона на #791d0 при 100%
