Ссылки и кнопки

💡 Объяснение

Элементы, которые «отвечают»

Хороший сайт реагирует на действия человека: кнопка слегка меняет цвет при наведении, «вдавливается» при нажатии, поле ввода подсвечивается, когда в нём курсор. Такие мелочи подсказывают: «на меня можно нажать», «я тебя слышу». Всё это делается на чистом CSS с помощью псевдоклассов.

Что такое псевдокласс

Псевдокласс описывает состояние элемента, а не его имя. Пишется через двоеточие сразу после селектора, без пробела:

a:hover {
  color: tomato;
}

Читается так: «ссылка, когда на неё навели мышь».

Главные псевдоклассы состояний

• :hover — курсор мыши находится над элементом. На телефонах наведения нет, поэтому важное действие не должно зависеть только от hover.
• :active — элемент нажимают прямо сейчас (кнопка мыши зажата).
• :focus — элемент в фокусе: курсор в поле ввода или к кнопке перешли клавишей Tab.
• :focus-visible — фокус, который нужно показать (при переходе с клавиатуры), но не при клике мышью.
• :visited — ссылка, по которой уже переходили.
• :checked — отмеченный checkbox или radio.
• :disabled — отключённое поле или кнопка.

Если используешь несколько состояний ссылки, пиши их в порядке LoVe HAte: :link, :visited, :hover, :active — иначе одни перебьют другие.

Структурные псевдоклассы

• li:first-child — первый ребёнок;
• li:last-child — последний ребёнок (например, убрать линию после последнего пункта);
• li:nth-child(2) — второй ребёнок;
• tr:nth-child(even) — чётные строки (полосатая таблица), odd — нечётные.

Как сделать ссылку похожей на кнопку

.menu a {
  padding: 10px 18px;
  border-radius: 8px;
  color: #2d3436;
  text-decoration: none;   /* убираем подчёркивание */
}
.menu a:hover {
  background: #fdcb6e;
}

Ссылки строчные, поэтому padding у них раздвигает фон, но не соседние строки. Если нужна кнопка с фиксированной шириной — добавь display: inline-block.

Плавность: transition

Без плавности цвет меняется мгновенно — резко. Свойство transition делает изменение анимированным:

.btn {
  background: #00b894;
  transition: background 0.3s;
}
.btn:hover {
  background: #00cec9;
}

• transition: 0.3s; — плавно менять все свойства за 0,3 секунды;
• transition: background 0.3s, transform 0.2s; — разные свойства с разной скоростью.

Важно: transition пишут в обычное состояние, а не в :hover, — тогда плавным будет и появление эффекта, и его исчезновение. Хорошая длительность — 0,15–0,4 секунды. Дольше — сайт кажется медленным.

Эффекты с transform

• transform: scale(1.05) — увеличить на 5%;
• transform: translateY(-4px) — приподнять на 4 пикселя;
• transform: rotate(3deg) — повернуть.

Transform не сдвигает соседей, поэтому отлично подходит для эффектов наведения.

Кнопка, которая «вдавливается»

.btn {
  box-shadow: 0 6px 0 #00795f;   /* «толщина» кнопки */
  transition: 0.1s;
}
.btn:active {
  transform: translateY(6px);    /* опускаем на толщину */
  box-shadow: none;
}

Не забывай о клавиатуре

Многие люди (с нарушениями моторики, опытные пользователи) управляют сайтом клавишей Tab. Браузер показывает рамку вокруг элемента в фокусе. Никогда не пиши outline: none без замены — человек потеряет, где находится. Лучше оформи фокус красиво: :focus-visible { outline: 3px solid #a29bfe; }.

Ещё правило: cursor: pointer (рука) — только для того, на что действительно можно нажать.

Частые ошибки

• Пробел перед двоеточием: a :hover — это другой селектор, и он не работает как ожидается.
• transition только в :hover — эффект исчезает резко.
• Убран outline у фокуса — сайтом нельзя пользоваться с клавиатуры.
• При hover меняется размер шрифта или padding — соседние элементы «прыгают». Используй transform.

Проверь себя

1. Чем :hover отличается от :active?
2. Куда нужно писать transition — в обычный стиль или в :hover? Почему?
3. Как сделать полосатую таблицу?