Skip to main content
X

Explore your training options in 10 minutes

CSS Tutorials

CSS Active

James Gallagher - December 28, 2020


When you’re designing a website, you may want to apply a style to an element when it is being activated by the user. For instance, you may want the color of a button or a link to change when the user clicks on the button or link.

That’s where the CSS :active pseudo-class comes in. The :active pseudo-class allows you to select elements that have been activated by the user, to which you can then apply styles.

This tutorial will discuss, with examples, the basics of CSS pseudo-classes and how you can use the :active pseudo-class in your code. By the end of reading this tutorial, you’ll be an expert at using the :active pseudo-class.

Get offers and scholarships from top coding schools illustration

Find Your Bootcamp Match

  • Career Karma matches you with top tech bootcamps
  • Access exclusive scholarships and prep courses










By continuing you agree to our Terms of Service and Privacy Policy , and you consent to receive offers and opportunities from Career Karma by telephone, text message, and email.

CSS Pseudo-classes

In CSS, selectors are used to select the elements to which a style or set of styles should be applied. For instance, a selector may select all <h1> or <select> tags on a web page, to which a set of styles will then be applied.

Often, when you’re styling a website, you’ll want to apply a style only when an element has entered a special state, such as being clicked by the user or being moused over. That’s where pseudo-classes come in.

Pseudo-classes are keywords added to a selector that allow you to select a particular element when that element exists in a certain state.

For this tutorial, we’re going to focus on the :active pseudo-class.

CSS :active Pseudo-class

The :active pseudo-class allows you to select an element that is being activated by the user. In CSS terms, “activating” means when a user presses down the mouse button and clicks on the element.

The :active pseudo-class is typically used with <a> and <button> elements. For instance, you could use the :active pseudo-class to change the color of a link to red when it is clicked, or to change the background color of a button to light blue when it is clicked.

Once the user has stopped clicking on an element, the element will no longer be “activated”. So, the element will not be selected by the :active selector when the user stops clicking on an element.

CSS :active Examples

Let’s walk through two examples to illustrate how you can use the :active pseudo-class.

Active Links

Suppose we are designing a website for a local card game club, the Wizards of the Boards. We have been tasked with creating an “About” page that includes a link to a web page that lists the card games played by members of the club.

By default, this link should appear in light blue. When this link is clicked, its text color should change to orange. To accomplish this task, we can use the :active pseudo-class. Here’s the code we would use to change the color of our text when a link is clicked:

<html>

<p>Wizards of the Boards is a Philadelphia, PA-based card game club. The club, founded by Michael Johnson and Gabriella Patel in 2004, welcomes players of all card games to come along. The club meets twice each week, on Mondays and Fridays, to discuss the latest in the card games our members play, and to sit down for a few matches of our favorite games.

To learn more about the games we play at Wizards of the Boards, <a href="/games.html">click here</a>.</p>
</html>

<style>

a {
	color: lightblue;
}

a:active {
	color: orange;
}
</style>

Our code returns: Click the Image of the "Run Code" Button, a triangle inside a circle button in the code editor above to see the output of our HTML/CSS code.

Venus, a software engineer at Rockbot

"Career Karma entered my life when I needed it most and quickly helped me match with a bootcamp. Two months after graduating, I found my dream job that aligned with my values and goals in life!"

Venus, Software Engineer at Rockbot

In our HTML file, we have defined a paragraph of text using <p> tags which outlines the history of the Wizards of the Boards card game club. In our <p> tag, we have specified an <a> tag which links to the page “games.html”, and is triggered when the user clicks on the text “click here”.

In our CSS code, we have specified two style rules. First, we have specified a rule that sets the text color of all <a> tags to light blue. Then, we specified a rule using the :active selector that sets the text color of all active <a> tags to orange. In other words, this rule changes the color of a link when a user is clicking on it.

Active Buttons

We have been working on a form for the Wizards of the Boards card game club which allows people to submit their interest to the club.

Toward the end of our form, we want to create a button that says “Submit Your Interest”. When this button is clicked, a 3px-wide orange border should be applied around the button.

We could create this button using the following code:

<html>

<button>Submit Your Interest</button>

</html>

<style>

button:active {
	border: 3px solid orange;
}
</style>

Our code returns: Click the Image of the "Run Code" Button, a triangle inside a circle button in the code editor above to see the output of our HTML/CSS code.

Let’s break down our code. In our HTML file, we have defined a button using the <button> tag. This button contains the text “Submit Your Interest”.

In our CSS style sheet, we have defined one rule that applies to a <button> tag when it is made active by the user. This rule creates a 3px-wide solid border around our button. We use the :active selector to only apply this rule when the button is active.

So, if we click on our button, an orange border will appear, and as soon as we stop clicking on the button, the border will disappear.

Conclusion

The CSS :active pseudo-class allows you to select an element when it is in its “active” state. Once you’ve selected an active element, you can apply a style or set of styles to the element.

The :active pseudo-class is commonly used with <a> tags and <button> tags to create effects that are triggered when a link or a button is clicked, respectively.

This tutorial discussed the basics of CSS pseudo-classes and how to use the :active pseudo-class. Now you’re equipped with the knowledge you need to start using the :active pseudo-class like an expert.

About us: Career Karma is a platform designed to help job seekers find, research, and connect with job training programs to advance their careers. Learn about the CK publication.

What's Next?

James Gallagher

About the author: James Gallagher is a self-taught programmer and the technical content manager at Career Karma. He has experience in range of programming languages and extensive expertise in Python, HTML, CSS, and JavaScript. James has written hundreds of programming tutorials, and he frequently contributes to publications like Codecademy, Treehouse, Repl.it, Afrotech, and others. He also serves as a researcher at Career Karma, publishing comprehensive reports on the bootcamp market.

Previous Article

Git Commit

Next Article

CSS Blur

Skip to main content