Справочник HTML & CSS

:active

Срабатывает, пока элемент нажимают, — между нажатием и отпусканием кнопки мыши.

Синтаксис

selector:active { … }

Примеры

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

<style>
  .btn { padding: 8px 16px; background: seagreen; color: white; border: 0; }
  .btn:active { transform: translateY(2px); background: darkgreen; }
</style>
 
<button class="btn">Press and hold</button>

Примечания

Для ссылок держите порядок :link, :visited, :hover, :active: из правил с равной специфичностью побеждает последнее, и при другом порядке часть состояний не будет видна.

См. также

:hover — Срабатывает, пока над элементом находится указатель мыши.
:focus — Срабатывает у элемента, на котором сейчас фокус: поле, в которое вводят текст, кнопка, выбранная клавишей Tab.
transform — Сдвигает, поворачивает, масштабирует или наклоняет элемент, не влияя на раскладку вокруг.

Вопросы и ответы по теме

В учебнике

Псевдоклассы — Стили для состояний и положения элементов — hover, focus, ссылки, first-child, nth-child, not и поля форм.

Спасибо, что читаете!