CSS :active Selector

What You’ll Learn

The :active pseudo-class styles an element while the user is pressing or tapping it. It is one of the easiest ways to give buttons and links instant visual feedback.

Introduction

The :active selector in CSS is used to style an element when it is being activated by the user. This typically happens when someone clicks a button, taps a link, or presses a form control.

The :active pseudo-class applies styles only during the interaction itself, giving users clear visual feedback that their action was received.

Definition and Usage

Use :active on interactive elements such as <button>, <a>, and <input> to darken a background, shrink an element slightly, or change color while pressed. The effect disappears as soon as the user releases the mouse button or lifts their finger.

📝 Syntax

The syntax for the :active pseudo-class is straightforward:

element:active {
  /* CSS properties */
}

Basic Example

button:active {
  background-color: #1d4ed8;
  transform: scale(0.98);
}

Syntax Rules

• Append :active directly to a selector with no space before the colon.
• Works on buttons, links, inputs, and custom interactive components.
• Styles apply only while the press or tap is in progress.
• Combine with :hover and :focus for full interaction coverage.
• Place :active after :hover when both change the same property.

Related Selectors

• :hover — styles when the pointer is over an element
• :focus — styles when an element has keyboard focus
• :focus-visible — focus ring for keyboard users only
• :link and :visited — unvisited and visited link states

When to Use :active

:active is ideal whenever you want immediate press feedback:

• Primary buttons — Show a darker shade or slight shrink on click.
• Navigation links — Confirm the tap on mobile menus and tabs.
• Icon buttons — Add a quick scale or opacity change on press.
• Custom controls — Sliders, chips, and cards that behave like buttons.
• Form submit actions — Reassure users their click registered.

Examples Gallery

Practice :active with buttons, links, combined states, and press-down effects.

button, a {
  padding: 10px 20px;
  background-color: #2563eb;
  color: white;
  border-radius: 6px;
}

button:active, a:active {
  background-color: #1d4ed8;
  transform: scale(0.98);
}

button:hover,
button:focus {
  background-color: #1d4ed8;
}

button:active {
  background-color: #1e3a8a;
}

a:hover {
  background-color: #2563eb;
  color: white;
}

a:active {
  background-color: #1d4ed8;
}

.card-btn {
  box-shadow: 0 4px 0 #1d4ed8;
  transform: translateY(0);
}

.card-btn:active {
  transform: translateY(3px);
  box-shadow: 0 1px 0 #1d4ed8;
}

⚠️ Common Pitfalls

• Short duration — :active lasts only while the mouse or finger is down. Test by clicking and holding, not just clicking quickly.
• Order matters — If :hover is declared after :active with the same specificity, hover can override the pressed look while the pointer is still over the element.
• Non-interactive elements — :active on a plain div only works if you add interaction (for example tabindex="0" or JavaScript handlers).
• Overdoing motion — Large scale or movement changes can feel jarring. Subtle shifts work best.

♿ Accessibility

• Do not rely on color alone — Pair color changes with size, shadow, or outline so low-vision users notice the state.
• Keep :focus visible — :active is not a replacement for keyboard focus styles. Always style :focus or :focus-visible too.
• Avoid removing outlines — Never use outline: none without providing an accessible alternative.
• Respect reduced motion — Consider @media (prefers-reduced-motion: reduce) for large transforms on press.

💡 Best Practices