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.

Add New Comment

13 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. :)

John

John

This not work on firefox 29.0.1

John

John

Ok now its working.Thanks.

Shokat

Shokat

John : Now its working ? I mean how?

5x 10x 15x 20x

13 Comments

Description