Custom animated checkbox inputs using CSS and iconfonts

View code Play Walkthrough

Description

This tutorial uses the popular fontawesome iconfont to create animated checkbox inputs using CSS3 transitions. The nice thing is that one doesn't have to create custom graphics in Photoshop for it.

Pseudo elements are used on labels to place two icons(checked and unchecked) one above the other using absolute positioning. When the user clicks on the label, the checked icon animates in/out.

To simulate real handwritten ticking/unticking, the checked icon's visibility is revealed from left to right using max-width transition.

Subscribe

Get updates about new walkthroughs, behind-the-scenes experiments, tips, tricks and more.

Add New Comment

9 Comments

(close)
Kyran Rana

Kyran Rana

Awesome walk through, love those colorful check boxes they look epic. XD

terryxixi

terryxixi

it is wonderful

Hellmut Barbosa

Hellmut Barbosa

Dude, the world needs more people like you!

shivek

shivek

Why the code after writing is not working in Latest Firefox update???
It is working on live demo but after writing the same code by myself.. it is not working in Firefox??plz explain??

Tahir

Tahir

Shivek same problem here with me. Its not working on Firefox and IE too. we need your help. Kindly suggest better solution. Thanks and i just want to say Its Awesome. :)

9 Comments

Description

5x 10x 15x 20x