Анимация эффектов при наведении курсора на кнопку HTML и CSS | Magic Button
Анимация кнопки button может быть создана с помощью CSS. Вот пример анимации кнопки: HTML: <button class="animate-button">Нажми меня</button> CSS: .animate-button { background-color: #4CAF50; /* Зеленый цвет кнопки */ border: none; color: white; padding: 15px 32px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; margin: 4px 2px; cursor: pointer; transition-duration: 0.4s; /* Длительность анимации */ } .animate-button:hover { background-color: #008CBA; /* Синий цвет кнопки при наведении */ } .animate-button:active { background-color: #FF0000; /* Красный цвет кнопки при нажатии */ } В этом примере, при наведении курсора на кнопку, ее цвет фона изменяется на синий. При нажатии кнопки, ее цвет фона изменяется на красный. Это создает анимацию эффекта нажатия кнопки.
Плавная анимация градиента при наведении на кнопку
Сделаем плавную анимацию градиента при наведении на кнопку