CodePen Challenge: Fun with Checkboxes

20 Jul, 2018

CodePen is an online community for testing and showcasing user-created HTML, CSS and JavaScript code snippets. I often use it to test out small pieces of code that I want to add to a website I'm working on. 

Each month they pick a theme (this month is "The Office") with a weekly challenge based on that theme to encourage developers to get creative with code. This week's theme is "Fun with Checkboxes" which they describe as follows: 

True and false. Good and evil. Ying and yang. Checked and unchecked.

The humble checkbox. The keeper of near-boolean state. Last week we looked at forms as a whole, this week let's zoom in a bit and look at the smallest of all form elements. Your challenge: do something fun and original with this native element.


My Checkbox Design

Checkboxes are essentially an on/off button so I styled the checkbox into a lightswitch, using wider borders and shading to give it some depth. Clicking on the "checkbox" (the light switch) changes the fill on the SVG image I used for the lighbulb.

My lightbulb checkbox switch, coded in pure HTML/CSS  - Click on the switch!


Some of my Favourite Checkbox Designs from the Challenge

You can browse checkboxes created by others here. Below are some that I enjoyed or might like to use as inspiration for future designs.

 An amazing pure HTML/CSS I/O button by Mojtaba Seyedi


A stylish HTML/SCSS checkbox by Simone Bernabè 


 An animated HTML/SCSS checkbox by Gustavo Merling


This one by Brian Orr is pretty fun, can you catch 'em all?


 A minimalist HTML/SCSS checkbox by Paweł Wojtas


 A funny HTML/SCSS/JavaScript checkbox by Christopher Kirk-Nielsen


 A minimalist HTML/SCSS/JavaScript by Glen Satchwell


 A quirky HTML/SCSS/JavaScript checkbox by Zach Handing


An HTML/CSS/JavaScript day/night switch by Bruno Massa 


If you're interested in getting started learning how to code, viewing snippets and participating on CodePen is a great way to do so! Keep an eye out for more CodePen challenge posts on my blog.



Need a checkbox added to your website?

New call-to-action

Topics: codepen-challenge

Join the Conversation!

Do you have a question, feedback or comments on this post?