Стилизация ссылок: изменение вида под разные состояния

Псевдоклассы для ссылок: больше, чем просто `a {}`

Ссылки — не просто синий текст с подчёркиванием. Их состояния (:hover, :active и другие) позволяют создать интерактивность, которая делает интерфейс живым. Разберёмся, как управлять каждым состоянием по отдельности и комбинировать их для максимального эффекта.

a {
  color: #2c3e50;
  text-decoration: none;
  transition: color 0.3s ease; /* Плавное изменение цвета */
}

a:hover {
  color: #e74c3c; /* Меняем цвет при наведении */
}

a:active {
  transform: scale(0.98); /* Лёгкое сжатие при клике */
}

💡 Совет: Всегда убирайте стандартное подчёркивание через text-decoration: none — так вы получите полный контроль над стилизацией.

Основные состояния ссылок

Каждое состояние ссылки обрабатывается отдельным псевдоклассом:

Псевдокласс	Когда применяется	Пример использования
`:link`	Непосещённая ссылка	`a:link { color: blue; }`
`:visited`	Посещённая ссылка	`a:visited { color: purple; }`
`:hover`	При наведении курсора	`a:hover { text-decoration: underline; }`
`:active`	В момент клика	`a:active { opacity: 0.7; }`
`:focus`	При фокусе (Tab, клик)	`a:focus { outline: 2px solid gold; }`

a:visited {
  color: #8e44ad; /* Фиолетовый для посещённых */
}

a:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.5); /* Кастомный фокус */
}

⚠️ Важно: :visited имеет ограничения в целях безопасности. Например, нельзя изменить font-size или background-image.

Анимации и плавные переходы

Ссылки — отличный объект для микроанимаций. Добавим плавности с помощью transition:

a {
  display: inline-block;
  padding: 8px 16px;
  background: #3498db;
  color: white;
  border-radius: 4px;
  transition: all 0.3s ease; /* Анимируем все изменения */
}

a:hover {
  background: #2980b9;
  transform: translateY(-2px); /* Лёгкий подъём */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

🔹 Что произойдёт:
- Цвет фона изменится плавно.
- Кнопка «приподнимется» на 2 пикселя.
- Появится мягкая тень.

Креативные эффекты для ссылок

1. Подчёркивание при наведении

Вместо стандартного text-decoration: underline можно создать кастомное подчёркивание:

a {
  position: relative;
}

a::after {
  content: '';
  position: absolute;
  width: 0;
  height: 2px;
  bottom: -4px;
  left: 0;
  background: #e74c3c;
  transition: width 0.3s;
}

a:hover::after {
  width: 100%; /* Подчёркивание «выезжает» */
}

2. Эффект нажатия

a:active {
  transform: scale(0.96); /* Лёгкое сжатие */
}

3. Ссылка-иконка с плавным появлением

a.icon-link::before {
  content: '→';
  opacity: 0;
  margin-right: 0;
  transition: all 0.3s;
}

a.icon-link:hover::before {
  opacity: 1;
  margin-right: 8px;
}

Доступность — не забываем про `:focus`

Всегда стилизуйте состояние :focus — это критично для пользователей, которые navigate с клавиатуры:

a:focus {
  outline: none;
  background: #f1c40f;
  color: #2c3e50;
}

🌟 Профи-приём: Комбинируйте :focus и :hover для универсальных стилей:
css a:hover, a:focus { /* Общие стили */ }

Итоги: правила стилизации ссылок

База: Сбросьте стандартные стили (text-decoration, color).
Состояния: Продумайте :hover, :active, :focus, :visited.
Анимации: Добавьте transition для плавности.
Доступность: Не скрывайте :focus без альтернативы.

Теперь ваши ссылки будут не просто кликабельными, а по-настоящему живыми! 🎉

/* Финальный пример: стильная кнопка-ссылка */
a.cta-button {
  display: inline-block;
  padding: 12px 24px;
  background: linear-gradient(45deg, #ff6b6b, #ffa502);
  color: white;
  border-radius: 50px;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 1px;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

a.cta-button:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 20px rgba(255, 107, 107, 0.3);
}