How to Add CSS Styling to An Element When Clicking It

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 {
  font-size:20px;
  background-color:red;
  border:none;
  color:#fff;
}

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 {
  background-color:white;
  color:red;
}

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.