Здесь мы разберем CSS анимацию — изменение цвета при наведении (:hover).
Это статья из цикла заметок по CSS анимации и эффектам.
Одним из самых простых и эффективных способов оживить интерфейс — сделать так, чтобы кнопка меняла цвет, когда пользователь наводит на неё курсор. Это мгновенно делает интерфейс более интерактивным и понятным.
Что используется
Псевдокласс :hover
Свойство transition для плавного перехода
Пример, того как это выглядит (наведите курсор на кнопку):
Вот пример на чистом CSS и HTML
|
1 |
<button class="color-button">Кнопка</button> |
Стили:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
.color-button { color: white; border: none; padding: 12px 24px; border-radius: 8px; font-size: 16px; cursor: pointer; /* цвет и описание перехода */ transition: background-color 0.3s ease; background-color: #007bff; } .color-button:hover { background-color: #b3003f; } |