:active CSS Pseudo Class

The :active pseudo-class represents an element that is currently being activated by the user - typically the time between pressing down (mouse or touch) and releasing (mouseup or touchend), or while a relevant keyboard activation key (Enter/Space) is being held. It is a transient, state-based selector used to style elements in the moment of activation, giving immediate visual feedback that the element is being pressed or triggered.

What it matches and when

• It matches an element only while the activation action is in progress. For mouse/touch, that is between press and release; for keyboard activation, while the activation key is held down.
• It is dynamic and ephemeral: once the press is released (or the key released), the element stops matching :active.
• Programmatic activation (e.g., element.click() in JavaScript) does not automatically make the element match :active; the pseudo-class reflects actual user input state, not script-invoked events.

Common uses

• Provide immediate visual feedback (pressed effect) for buttons, links, and other controls.
• Combine with :hover and :focus styles for a complete interactive state system.
• Improve perceived responsiveness by shrinking, darkening, or changing shadows while the control is pressed.

Interaction with other states and specificity

• :active is a pseudo-class and has the same specificity as other pseudo-classes. The rule that appears later in the cascade or with higher specificity wins.
• In the common link state ordering, remember link pseudo-classes interplay: :link, :visited, :hover, :active (often remembered as LVHA). Order of rules can affect whether your :active style is applied as intended.
• It can be combined with other selectors (e.g., button:focus:active, a.button:active) to refine behavior.

Touch and mobile notes (general)

• On touchscreens, activation is controlled by the touch gesture lifecycle; behavior can be slightly different (for example, some elements might get active on touchstart and stay until touchend). Because it’s ephemeral, very brief taps can make :active visible only momentarily.
• If you need a longer “pressed” visual state after a tap, use JavaScript to add/remove a class instead of relying solely on :active.

Accessibility considerations

• Don’t rely on :active alone for keyboard users; combine with :focus or :focus-visible so keyboard-focused controls get visible feedback.
• Ensure contrast and affordance are sufficient for users who may not perceive subtle transforms or color shifts.
• For custom controls, manage ARIA roles and keyboard behavior appropriately; :active is only a visual state and does not change accessibility semantics.

Animation and transitions

• Because :active is short-lived, transitions with long durations may be interrupted; simple, fast transitions (100–150ms) or instantaneous changes often feel best for pressed effects.
• You can animate properties like transform, box-shadow, and background-color for a tactile effect, but be aware the active state may not last long enough for long animations to be perceived.

Examples

Basic pressed effect on a button:

button {
  background: #0a74da;
  color: white;
  border: none;
  padding: 0.6rem 1rem;
  border-radius: 6px;
  transition: transform 80ms ease, box-shadow 80ms ease;
  box-shadow: 0 6px 12px rgba(0,0,0,0.12);
}

button:active {
  transform: translateY(2px) scale(0.995);
  box-shadow: 0 3px 6px rgba(0,0,0,0.12);
}

Anchor link pressed highlight:

a.card {
  display: block;
  background: white;
  border: 1px solid #e0e0e0;
  padding: 1rem;
  transition: background-color 120ms;
}

a.card:active {
  background-color: #f6f9ff;
}

Using :active together with :focus for keyboard accessibility:

.button {
  outline: none;
  border-radius: 4px;
  padding: 0.5rem 0.75rem;
}

.button:focus,
.button:focus-visible {
  box-shadow: 0 0 0 3px rgba(10,116,218,0.18);
}

/* Pressed look works for both mouse/touch and keyboard activation */
.button:active {
  transform: translateY(1px);
}

Simulating a longer pressed state (when needed) by toggling a class with JavaScript:

.button--pressed {
  transform: translateY(2px);
  transition: transform 80ms;
}

// JS: add/remove .button--pressed on pointerdown/pointerup for a longer visible effect
element.addEventListener('pointerdown', () => element.classList.add('button--pressed'));
element.addEventListener('pointerup',   () => element.classList.remove('button--pressed'));
element.addEventListener('pointercancel', () => element.classList.remove('button--pressed'));

Practical tips

• Prefer transform and box-shadow for pressed effects because they are performant and visually clear.
• Combine :active with :focus so keyboard users and mouse/touch users both receive clear feedback.
• For very short interactions where visual change is essential, consider using JavaScript to augment or prolong the pressed state if needed.
• Test with actual input methods (mouse, touch, keyboard) to ensure the pressed feedback feels natural.