CSS :active Pseudo-Class

CSS :active Pseudo-Class

The CSS :active pseudo-class selects an element while the user is activating it, such as pressing a mouse button on a link or button. It allows you to provide immediate visual feedback during an interaction.

:active Syntax

selector:active {
  property: value;
}

The :active pseudo-class is added directly to a selector without a space. The declarations inside the rule apply while the element matches the active state.

Example Syntax

button:active {
  background-color: #003d80;
}

This rule changes the background color of a button while it is being activated.

How :active Works

The :active pseudo-class represents an element during activation. With a mouse, this commonly begins when the primary mouse button is pressed and ends when it is released. The exact behavior depends on the element, input method, and browser.

Unlike a persistent selected state, :active is temporary. It does not indicate that a navigation link points to the current page or that a button remains selected after activation.

On touch devices, the active appearance may be brief or depend on browser behavior. Keyboard activation can also produce an active state for certain interactive elements.

Styling Active Links

The :active pseudo-class is commonly used to change a link's appearance while it is being pressed.

a:link {
  color: #0056b3;
}
a:visited {
  color: #663399;
}
a:hover {
  color: #d35400;
}
a:active {
  color: #c0392b;
}

When link states have equal specificity, the order of the rules matters. A common order is :link, :visited, :hover, and :active, allowing the active style to take precedence during activation.

Other selectors with greater specificity or later cascade priority can still override these declarations.

Styling Active Buttons

Buttons can use :active to simulate a pressed appearance. A slight movement or darker background helps communicate that the button is responding to the user's action.

.demo-button {
  padding: 10px 18px;
  border: 0;
  background-color: #0066cc;
  color: #fff;
  cursor: pointer;
}
.demo-button:active {
  background-color: #004080;
  transform: translateY(2px);
}

The transform property moves the button down by two pixels while it is active. The button returns to its original position when the active state ends.

This effect is visual only. It does not replace the button's normal HTML behavior or indicate a permanent on/off state.

Related Interaction States

Several CSS pseudo-classes describe different stages of user interaction. Understanding their differences helps you create predictable controls.

These states can overlap. For example, a button can be hovered, focused, and active at the same time.

Best Practices

• Use :active to provide immediate feedback during an interaction.
• Keep the active appearance noticeable without making the control difficult to read.
• Do not rely on :active alone to communicate important information because the state is temporary.
• Provide appropriate focus styles for keyboard users, particularly with :focus-visible.
• Test interactions using a mouse, keyboard, and touch device when possible.
• Use a persistent state or attribute, such as aria-pressed where appropriate, for toggle buttons rather than treating :active as a selected state.

:active Example

The following example demonstrates how :active changes the appearance of a button and a link while they are pressed.

HTML

<button class="press-button" type="button">Press Me</button>
<a class="press-link" href="#example">Press This Link</a>

CSS

.press-button {
  padding: 10px 18px;
  border: 0;
  background-color: #0066cc;
  color: #fff;
  cursor: pointer;
}
.press-button:active {
  background-color: #003d80;
  transform: translateY(2px);
}
.press-link {
  display: inline-block;
  margin-left: 12px;
  color: #0056b3;
}
.press-link:active {
  color: #c0392b;
}

Browser Result

Press and hold the button or link to observe its active appearance. The visual change ends when the activation ends.

Play in Editor

Browser Support

The :active pseudo-class is widely available across modern browsers. Interaction details may differ between mouse, keyboard, and touch input. For compatibility information, visit Can I Use? and search for CSS :active.

Specifications

The :active pseudo-class is defined in the Selectors Level 4 specification.

Selectors Level 4 - The :active Pseudo-Class