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
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.