How to Add CSS Styling to An Element When Clicking It

Oliver Carmont
2 min readFeb 13, 2021
How Do You Add CSS Styles on Click? Source: Jamie Street

New to CSS? Not sure how to add styles when clicking on an element?

Luckily, it’s pretty easy to do 😄 Here’s how it’s done:

Let’s Make a New Button 🕹️

<button class="button">Click Me!</button>

Let’s add a few default styles to the button:

.button {

You’re Link Should Now Look Like This: (Click “Run Pen”)

You may notice that when you click on the button, there’s a thin blue border that forms around the button. Naturally, you may want another style when the button is clicked upon. Therefore, we can add the following CSS styles:

.button:active {

There it is: all you need to change the styles when clicking on a CSS element is a “active” selector on your chosen CSS element.

See for yourself in the Code Pen below:

Want to change styles on an image or div? There’s no difference!

All you need is an “:active” CSS selector:

.image:active {
.container:active {

That’s All Folks!

And that’s how you can adjust CSS styles on click!

If you enjoyed this tutorial and would like to see more, make sure to give this story a clap 👏!

If you really enjoyed this tutorial, consider buying me a cup of coffee!

Oliver Carmont

UI/UX Designer that produced tech tutorials in Berkeley, CA.