Это здорово, но пока это не работает. Обратите внимание, как сбрасывается анимация после 500ms , и кнопка возвращается к исходному цвету. Вы хотите, чтобы кнопка оставалась подсвеченной. Это можно сделать, установив свойство animation-fill-mode forwards . Режим animation-fill-mode задает стиль, применяемый к элементу, когда анимация завершена. Вы можете установить его так: animation-fill-mode: forwards;
Задайте свойство animation-fill-mode button:hover forwards чтобы кнопка оставалась выделенной, когда пользователь наводил на нее курсор.