:active CSS Pseudo Class

Description

The :active pseudo-class defines the style of the active element. This is the state of the element that occurs between the click and release of the mouse button. Mostly applied to links and buttons, but not limited to them.

Syntax

element: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