Псевдоклассы :hover, :active и :focus

Псевдоклассы CSS — это специальные «состояния» элементов на странице, которые позволяют изменить их внешний вид в зависимости от действий пользователя. Самыми популярными псевдоклассами для интерактивности считаются :hover, :active и :focus. Давайте разберём, как они работают и как их можно использовать для создания привлекательных интерфейсов.

Псевдокласс :hover

:hover активируется, когда пользователь наводит курсор мыши на элемент. Например, с его помощью можно сделать так, чтобы кнопка меняла цвет, когда на неё навели.

Пример:

.button {
  background-color: #4CAF50; /* зелёный фон */
  color: white; /* белый текст */
}

.button:hover {
  background-color: #45a049; /* более тёмный зелёный при наведении */
}

Здесь у кнопки .button меняется фон на более тёмный при наведении курсора, что делает её интерактивной и показывает пользователю, что она кликабельна.

Псевдокласс :active

:active срабатывает, когда элемент находится в состоянии «нажатия». Например, если пользователь кликнул на кнопку, :active применится в тот момент, пока кнопка не отпущена.

Пример:

.button:active {
  background-color: #3e8e41; /* ещё более тёмный зелёный при нажатии */
}

Этот псевдокласс помогает показать пользователю, что клик зарегистрирован. Кнопка меняет цвет, что добавляет эффект «реакции» на действие.

Псевдокласс :focus

:focus используется для элементов, которые получают «фокус» при клике или переходе на них с клавиатуры (например, табуляцией). Это важно для полей ввода, кнопок и ссылок, чтобы улучшить навигацию и доступность сайта.

Пример:

input:focus {
  outline: 2px solid #4CAF50; /* обводка вокруг поля ввода */
  background-color: #e8f0fe; /* светло-голубой фон */
}

Когда пользователь кликает на поле ввода или переходит к нему через клавишу Tab, вокруг появляется цветная рамка и меняется фон, что помогает понять, что элемент сейчас активен.

Совмещение псевдоклассов

Можно комбинировать эти псевдоклассы для создания более сложных эффектов. Например, можно сделать так, чтобы кнопка подсвечивалась при наведении, а при клике дополнительно изменяла цвет.

Пример:

.button {
  background-color: #4CAF50;
  color: white;
}

.button:hover {
  background-color: #45a049;
}

.button:active {
  background-color: #3e8e41;
  transform: scale(0.95); /* лёгкое уменьшение кнопки при нажатии */
}

Здесь кнопка меняет цвет при наведении, а при нажатии становится чуть темнее и как бы «утоплена», создавая эффект интерактивности.

Интересный пример :hover эффекта

Вот классный пример hover-эффекта, который создаёт стильный и плавный эффект подсветки кнопки. При наведении кнопка как бы «подсвечивается» снизу, а цвет фона плавно изменяется.

HTML:

<div class="button-container">
  <a href="#" class="fancy-button">Наведи на меня!</a>
</div>

CSS:

/* Основные стили контейнера */
.button-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #f4f4f9;
}

/* Стиль кнопки */
.fancy-button {
  position: relative;
  display: inline-block;
  padding: 15px 30px;
  color: #ffffff;
  font-size: 18px;
  font-weight: bold;
  text-decoration: none;
  background-color: #4CAF50; /* начальный цвет фона */
  border-radius: 8px;
  overflow: hidden;
  transition: background-color 0.3s ease;
}

/* Подсветка снизу */
.fancy-button::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0%;
  height: 4px;
  background-color: #ffffff; /* цвет подсветки */
  transition: width 0.4s ease, left 0.4s ease;
}

/* Эффект при наведении */
.fancy-button:hover {
  background-color: #45a049; /* более тёмный цвет фона при наведении */
}

.fancy-button:hover::before {
  width: 100%;
  left: 0;
}

Посмотреть выполнение кода можно, кликнув на кнопку 🙂

Как это работает:

1. Кнопка .fancy-button имеет базовый цвет и стиль.
2. Псевдоэлемент ::before добавляет «линию подсветки» снизу, которая начинается с ширины 0%, но плавно увеличивается до 100%, когда пользователь наводит на кнопку курсор.
3. При наведении меняется и цвет фона самой кнопки, делая эффект более выразительным.

Эта кнопка выглядит привлекательно и добавляет небольшой визуальный эффект, который подчёркивает её интерактивность.

Материалы и ссылки

HTML Academy: «События при наведении. :hover, :focus, :active в CSS»

Medium: «Стилизуйте состояния hover, focus и active по-разному»

PurpleSchool: «Псевдоклассы. Изменение состояния элемента»

MDN Web Docs: «:hover»

The 55 Best CSS Button Hover Effects You Can Use Too

Подводим итоги

Псевдоклассы :hover, :active и :focus — это простой способ сделать сайт более живым и интересным для пользователей. Они помогают добавить эффекты и подсказки, которые показывают, что с элементом можно взаимодействовать.

Например, :hover помогает выделить кнопки и ссылки, когда пользователь наводит на них мышку, показывая, что на них можно нажать. :active даёт пользователю понять, что клик произошёл — элемент немного изменяется, когда на него нажимают. А :focus делает навигацию проще, подсвечивая поля ввода и другие элементы, к которым переходит пользователь с клавиатуры.

Эти эффекты не требуют сложного кода, но значительно улучшают впечатления от сайта. Пользователям становится проще ориентироваться и работать с элементами интерфейса, а сам сайт выглядит продуманнее и современнее. Простые изменения, как в наших примерах, помогут привлечь внимание к нужным элементам и сделать взаимодействие с сайтом более приятным и понятным.

Спасибо, что прочитали нашу статью!
Успехов в кодинге и до новых встреч! 👋