Introduction
CSS :active
is a pseudo-class that allows you to style an element when it is in an "active" state, typically when a user clicks on it. This allows you to provide visual feedback to users and create more engaging and interactive user interfaces. In this tutorial, we will explore how to use the :active pseudo-class in CSS, including examples of how to use it to create different effects on elements such as buttons, links, and other interactive elements.
Using :active with Buttons
One of the most common uses of the :active
pseudo-class is to style buttons. When a user clicks on a button, you can use :active
to change the appearance of the button to give the user visual feedback that their action has been registered.
<button>Click me</button>
For example, the following CSS code changes the background color of a button when it is in an active state:
button:active { background-color: red; }
You can also use :active
to change other properties of a button, such as its text color or border. For example:
button:active { color: red; border: 2px solid blue; }
Output:
See the Pen button :active by Vinish Kapoor (@foxinfotech) on CodePen.
Using :active with Links
Another common use of the :active
pseudo-class is to style links. When a user clicks on a link, you can use :active
to change the appearance of the link to give the user visual feedback that the link has been clicked. To add text or icons before or after the link, check these tutorials: ::before and ::after.
<a href="#">Click me</a>
For example, the following CSS code changes the text color of a link when it is in an active state:
a:active { color: red; }
You can also use :active
to change other properties of a link, such as its background color or font weight. For example:
a:active { background-color: yellow; font-weight: bold; }
Output:
See the Pen link :active by Vinish Kapoor (@foxinfotech) on CodePen.
Using :active with Other Elements
In addition to buttons and links, you can use the :active
pseudo-class to style any element that can be in an active state. For example, you can use it to style a div element when a user clicks on it.
<div>Click me</div>
For example, the following CSS code changes the background color of a div element when it is in an active state:
div:active { background-color: blue; }
You can also use :active
to change other properties of a div element, such as its text color or border. For example:
div:active { color: red; border: 2px solid green; }
Output:
See the Pen Untitled by Vinish Kapoor (@foxinfotech) on CodePen.
Browser Support

Conclusion
The :active pseudo-class in CSS allows you to style elements when they are in an active state, such as when a user clicks on them. This allows you to create more engaging and interactive user interfaces by providing visual feedback to users. In this tutorial, we have covered examples of how to use :active
to style buttons, links, and other elements in different ways. With the knowledge of :active
, you can now create more interactive and user-friendly web pages.
FAQ
The :active pseudo-class in CSS allows you to style elements when they are in an active state, such as when a user clicks on them.
To use the :active pseudo-class with buttons, you can add a CSS rule that targets the button element and applies styles to it when it is in an active state.
Yes, you can use the :active pseudo-class with any element that can be in an active state. For example, you can use it to style a div element when a user clicks on it.