How to add an onclick effect in CSS?

Spread the love

Sometimes, we want to add an onclick effect in CSS.

In this article, we’ll look at how to add an onclick effect in CSS.

To add an onclick effect in CSS, we can use the :target pseudo-class.

For instance, we write

<a href="#something">Show</a>
<div id="something">Bingo!</div>

to add a link and a div.

Then we write

#something {
  display: none;
}

#something:target {
  display: block;
}

to make the div hidden by default with

#something {
  display: none;
}

Then we make it show when we click on the link with

#something:target {
  display: block;
}

To add an onclick effect in CSS, we can use the :target pseudo-class.