CSS click events is one of the most interesting topic to learn. In the past, we used to use CSS just for designing and layout of site, but now you can do much more than just designing. Nowadays, CSS can make decisions, calculation and reaction to users. In this tutorial, we are going to learn how CSS click events work and how we can make pure CSS hamburger menu.
We can do some basic stuff like responsive layouts, transparency in colors, grid, gradients and so much more without JavaScript.
But one thing we’ve always been missing is the possibility to handle click events with CSS. Actually, some people think we shouldn’t have this option since interactions are more like a JavaScript kind of stuff. I understand the idea, but it always bothered me to have to use JavaScript for a very simple click event.
look at the following demo:
[codepen_embed height=”268″ theme_id=”0″ slug_hash=”RrExyK” default_tab=”result” user=”Hujjat”]See the Pen <a href=’http://codepen.io/Hujjat/pen/RrExyK/’>Css Click event</a> by Hujjat Nazari (<a href=’http://codepen.io/Hujjat’>@Hujjat</a>) on <a href=’http://codepen.io’>CodePen</a>.[/codepen_embed]
I have used pure CSS for handling click event. So now lets learn it.
How CSS Click Events Works
As of today, CSS doesn’t provide any official way to handle a click event in CSS. But there are some interesting tips and tricks that we can use to “detect” a click using pure CSS, without a single line of JavaScript. Some of this tricks might not work in older browsers, so please don’t use them in your real projects. It’s just tips and tricks that’s possible to do.
Using Checkbox
Using checkbox for CSS click events is the best and most reliable way. Checkbox is what you already know about. It’s binary, means either checked or unchecked (0 or 1).
Let’s look at the example:
[codepen_embed height=”268″ theme_id=”0″ slug_hash=”KVbodz” default_tab=”result” user=”Hujjat”]See the Pen <a href=’http://codepen.io/Hujjat/pen/KVbodz/’>Simple1 click event css</a> by Hujjat Nazari (<a href=’http://codepen.io/Hujjat’>@Hujjat</a>) on <a href=’http://codepen.io’>CodePen</a>.[/codepen_embed]
When you check the chekbox it’s changing the color and background color of the paragraph.
Now let’s make it a little more interesting.
[codepen_embed height=”268″ theme_id=”0″ slug_hash=”VeqXmV” default_tab=”result” user=”Hujjat”]See the Pen <a href=’http://codepen.io/Hujjat/pen/VeqXmV/’>Simple 2 css click event</a> by Hujjat Nazari (<a href=’http://codepen.io/Hujjat’>@Hujjat</a>) on <a href=’http://codepen.io’>CodePen</a>.[/codepen_embed]
As you can see we have added a new label tag. Then we gave it some styling to look like a button. Our check box has absolute position with top and left value. Now you can play with CSS property to make it the way you want.
Conclusion
It was just the basic of handling click events in CSS. There are some other ways also that you can detect click events and we will cover them in future articles. I hope it has been informative for you. If you have any question or confusion, feel free to ask on comment and I will answer.