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:
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:
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:
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! ☕