CSS :active - Apply Styles on Click of an Element

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

What is the :active pseudo-class in CSS?

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.

How can I use the :active pseudo-class with buttons?

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.

Can I use the ::active pseudo-class with any element, not just buttons and links?

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.