HTML & CSS reference

:active

Matches an element while it is being pressed — between pressing and releasing the mouse button.

Syntax

selector:active { … }

Examples

The button "sinks" while pressed:

<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>

Notes

For links, keep the order :link, :visited, :hover, :active: rules with equal specificity that come later win, and a different order hides some of the states.

Related recipes

In the tutorial

Pseudo-classes — Styles for element states and positions — hover, focus, links, first-child, nth-child, not and form fields.

Thanks for reading!