Как поменять вид кнопки при наведении мыши? Псевдокласс :hover

Задан 4 месяца назад497 просмотров2 ответа

Хочу, чтобы кнопка меняла цвет, когда на неё наводишь курсор. Видел двоеточие и слово hover, но не понял, как это писать в стилях.

Глеб Баранов 🥚 Яйцо

спросил 4 месяца назад

2 ответа

✓ Принятый ответ — помог автору

Это делается псевдоклассом :hover — он применяет стиль, пока курсор над элементом:

.btn {
  background: blue;
  color: white;
}
.btn:hover {
  background: darkblue;  /* при наведении темнее */
}

Пишется без пробела: .btn:hover. Как только уводишь мышь — стиль возвращается к обычному. Так делают подсветку ссылок, кнопок, пунктов меню.

Михаил Виноградов 🐣 Птенец

4 месяца назад

Чтобы переход был не резким, а плавным, добавь к обычному состоянию transition:

.btn {
  transition: background 0.3s;
}

Тогда цвет будет мягко перетекать за 0.3 секунды, а не дёргаться мгновенно. Смотрится гораздо приятнее.

Максим Герасимов 🐣 Птенец

4 месяца назад

Войдите, чтобы ответить на вопрос.