: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

Notes

Internet Explorer prior to version 8 and Opera prior to version 7 support :active for links only.

Browser Support

Desktop

4	12	1	1	5	1

Tablets / Mobile

1	18	4	10.1	1	1.0

Last updated by CSSPortal on: 25th November 2019

Share this Page

If you have enjoyed using CSSPortal, please consider sharing this page with other users, just click on your preferred social media link or copy the webpage from the link below.

URL

Menu