:active CSS Pseudo Class

If this site has been useful, we’d love your support! Running this site takes time and resources, and every small contribution helps us keep creating valuable content. Consider buying us a coffee to keep things going strong!

☕ Buy a Coffee

Description

The CSS :active pseudo class selects and styles an element when the user is actively interacting with it. This is typically the case when the user is clicking and holding on the element, but it can also apply to other forms of interaction, such as pressing a key on a keyboard.

The :active pseudo class is commonly used on links and buttons, but it can also be used on any other element. For example, you could use it to style a text input field when the user is typing into it, or to style a checkbox when it is checked.

Here is an example of how to use the :active pseudo class to style a button:

button {

  background-color: blue;

  color: white;

}



button:active {

  background-color: red;

  color: black;

}

This CSS will style the button to have a blue background and white text when it is not being interacted with. However, when the user clicks on the button and holds the mouse button down, the button will change to have a red background and black text.

The :active pseudo class can be used to create a variety of visual effects, such as indicating to the user that an element is being interacted with, or providing feedback to the user about their actions.

Syntax

:active {
  /* ... */
}

Example

HTML

<p>Hold your mouse button over the links to view the :active pseudo class in action. Link 3 has no :active pseudo class.</p>

<a class="link1" href="#">Link 1</a>

<br>

<a class="link2" href="#">Link 2</a>

<br>

<a href="#">Link 3</a>

CSS

.link1:active {

   background: blue;

   color: white;

}

.link2:active {

   font-weight: bold;

   border: 1px solid red;

   text-decoration: none;

}

Result

Editor