Understanding the CSS :active Pseudo-Class

This article provides an overview of the CSS :active pseudo-class, explaining what it is, how it works under the hood, and how developers use it to simulate physical mouse-down interactions. You will learn the mechanics behind the activation state, how to style elements to provide immediate tactile feedback, and the essential rules for properly ordering pseudo-classes in your stylesheets.

What is the :active Pseudo-Class?

The :active pseudo-class in CSS represents an element that is currently being activated by the user. While it applies to any interactive element, it is most commonly used on links (<a>) and buttons (<button>).

An element enters the active state at the exact moment a user presses the primary mouse button down on it (mousedown) and leaves this state when the mouse button is released (mouseup). It also applies while tapping on a touch screen or pressing the spacebar on a focused button via a keyboard.

Visually Representing Physical Mouse-Down Clicks

In the physical world, pressing a mechanical button pushes it down into a housing, compressing a spring. The CSS :active state allows digital interfaces to mimic this physical behavior, giving users clear, immediate sensory feedback that their input has been registered.

Without an active state, an interface can feel unresponsive or sluggish, leaving users uncertain if a click registered before a page transition or script execution occurs.

Common Techniques for Tactile Feedback

  1. Depth and Translation: Moving an element down along the Y-axis simulates the physical depression of a button.
  2. Shadow Compression: In real life, an object closer to a surface casts a smaller, tighter shadow. Reducing box-shadow during :active creates the illusion of pressing into the screen.
  3. Color and Brightness Shifts: Darkening a button's background color indicates compression and contact.
  4. Scale Reduction: Slightly shrinking an element (e.g., scale(0.98)) simulates pressure against the screen.

Code Example

/* Base button style */
.button {
  background-color: #0066cc;
  color: #ffffff;
  padding: 12px 24px;
  border: none;
  border-radius: 4px;
  box-shadow: 0 4px 0 #004499;
  cursor: pointer;
  transition: all 0.05s ease;
}

/* Mouse-down tactile feedback */
.button:active {
  transform: translateY(3px);
  box-shadow: 0 1px 0 #004499;
  background-color: #0055b3;
}

In this example, pressing the mouse button shifts the element downward by 3 pixels and flattens the bottom shadow from 4 pixels to 1 pixel, directly mirroring mechanical action.

The LVHA Rule for Specificity

When styling links and interactive controls, pseudo-classes must be declared in a specific order to prevent conflicting rules from overriding one another. The recommended order is remembered by the mnemonic LVHA:

  1. :link
  2. :visited
  3. :hover
  4. :active

Because :active is triggered while the cursor is still hovering over the element, placing :hover after :active in your stylesheet would cause the hover styles to override the active styles. Placing :active last ensures that the mouse-down feedback displays reliably.