:active
Matches an element at the moment it’s activated, most often while the mouse button is pressed down on a button or link.
Example
#.btn {
box-shadow: 0 4px 0 #4c1d95;
transition: transform 0.08s, box-shadow 0.08s;
}
.btn:active {
transform: translateY(4px);
box-shadow: 0 0 0 #4c1d95;
}<button class="btn" type="button" style="padding: 10px 18px; border: 0; border-radius: 10px; background: #7c3aed; color: #fff; font: 600 15px system-ui, sans-serif; cursor: pointer;">Start the lesson</button>Press the button and hold it: it slides down, and the shadow beneath it disappears, just like a real key.
Definition and usage
#The :active pseudo-class lasts a very short time: from pressing the mouse button (or touching the screen) to releasing it. It’s the moment the button is pushed, which makes it perfect for a physical-press effect, such as a slight shrink or a downward shift.
It’s most often applied to buttons and links. For the user, it confirms that the click was noticed, even before the page reacts to it in any other way.
Rule order matters. :active should come after :hover, because during a click both states apply at once, and with equal specificity the later rule wins. Hence the well-known order for links: :link, :visited, :hover, :active.
Syntax
#selector:active { property: value; }Press effects
#- The button shrinks slightly, like a pressed key. Press it and hold.
- An inner shadow makes the button look like it’s sinking in.
- A darkening effect at the moment of the click. Works with any background color.
- Hover first, then press. The
:activerule sits lower, so during a click it wins over:hover.
Press effects in practice
#scale(0.95)
.demo:active { transform: scale(0.95); }inset box-shadow
.demo:active {
box-shadow: inset 0 3px 8px rgb(0 0 0 / 0.5);
}brightness(0.8)
.demo:active { filter: brightness(0.8); }:hover, then :active
:active rule sits lower, so during a click it wins over :hover..demo:hover { background: #6d28d9; }
.demo:active { background: #4c1d95; }Browser support
#Widely available
Works in all modern browsers, phones included. You can use it without worry.
- Chrome
- Edge
- Firefox
- Safari
Good practices
#- Keep the
:activeeffect short and subtle, with a transition of around 50 to 100 ms. A longer animation won’t have time to show, because the button is released quickly. - Place
:activeafter:hoverin the stylesheet; otherwise, with equal specificity, the click effect gets hidden.
Related entries
#- :hoverMatches the element the mouse cursor is currently over. The basis of hover effects on buttons, links, and cards.
- :focusMatches the element that has focus, meaning it currently receives keyboard input, such as a clicked form field.
- :focus-visibleMatches a focused element only when the browser decides the indicator should be visible, such as during keyboard navigation.
Spotted a mistake or missing an example? Write to us.