I hope you enjoy this toggle and checkbox experiment. It uses only CSS, no JavaScript or jQuery was used. The web can be functional and at the same time enjoyable and pleasurable. This is a way of enhancing both the user experience (UX) and user interface (UI). Toggle and checkbox fun is but one more way to use tactile and visually responsive design to achieve more effective UI and UX. Another example is my method for navigating this site which almost entirely avoids the use of menus.

CSS3 Toggle Switches

Checkbox toggle switches:

Which of the following are elemental spirits of air, water and earth?

Air
Water
Earth

Adding the elemental icon images turned out to be harder than I expected. I finally did it with a float: right;.



Radio toggle switches:

Please indicate your economic status:

Tin Cups
Brass Spitoons
Golden Parachutes

Radio toggle switches with different icons (just a little more CSS):

Master of appearances, select one:

Thanks to Craig Buckler at SitePoint!

Also thanks to Chris Coyer for his Stuff you can do with the “Checkbox Hack”> It was the basis for the image toggling.

UI and UX are, of course, professions in their own right. Nonetheless, web developers should always be searching for methods for enriching the user experience and simplifying and making more intuitive user interfaces. There’s nothing wrong with a little toggle and checkbox fun.

CSS / HTML

Click What You Want To See