15+ Checkbox Styles With CSS Code

Hello there! In this article, you will find 15+ CSS Checkboxes designs with complete source code so you just copy and paste it into your project.

checkboxes and radio buttons are such and important part of a website but still look terrible and don’t play well without some love & styling. From adding a filters for search bar to making a to do list you need checkboxes.

Here is available 15 Awesome pure checkbox designs created just using pure Html and CSS.

Don’t worry we’ve got you covered. We have Handpicked best 15+ CSS Checkboxes designs from the web for you to use in your project.

Let’s see some cool 15+ CSS Checkboxes designs.

1. Pure CSS Fancy Checkbox/Radio

Code by	Raúl Barrera
Demo & download	click here for code
Language used	HTML,CSS(SCSS),JS
External link / Dependencies	Yes
Responsive	Yes

Let’s start our list with a Fancy Checkbox/Radio buttons with small transition by Raúl Barrera. After clicking the button the whole button label/Text is filled with white background with smooth transition.

2. Fancy Checkboxes and Radio Buttons — with Font Awesome

Code by	Jase
Demo & download	click here for code
Language used	HTML,CSS(SCSS),JS
External link / Dependencies	Yes
Responsive	Yes

Fancy Checkboxes and Radio Buttons with some Font Awesome glyphs. It even has some toggles to change checkbox from circle to square and to turn fanciness on or off.

3. chippy checkbox inputs

Code by	Adam Quinlan
Demo & download	click here for code
Language used	HTML,CSS
External link / Dependencies	Yes
Responsive	Yes

Want to add filters on your project/Website? This checkbox design is perfect for that purpose, On click the plus icon changes to a tick icon with transition effect.

4. Checkbox card

Code by	Sławek Jaskulski
Demo & download	click here for code
Language used	HTML(Pug),CSS(SCSS)
External link / Dependencies	Yes
Responsive	No

If your are planning to add categories or some type of choices on project with images. This design by Sławek Jaskulski is perfect, Checkbox with images with small effects on click.

Check battery status with JavaScript Navigator Battery

5. Windows 10 inspired pure CSS checkbox switch

Code by	Chris
Demo & download	click here for code
Language used	HTML,CSS(SCSS)
External link / Dependencies	Yes
Responsive	Yes

Windows fan boy? or just want to add some windows like checkbox for some reason, Well there you go, windows Windows 10 inspired pure CSS checkbox switch.

6. ✅ Emojibox – Checkbox with emojis

Code by	Jouan Marcel
Demo & download	click here for code
Language used	HTML(Pug),CSS(Sass),JS
External link / Dependencies	Yes
Responsive	Yes

In this project, Jouan Marcel used emojis to create more expressive checkboxes with emojis. It makes use of checkbox and radio button to create a binary or non-binary selection respectively. Animations are done with CSS transitions.

7. Toggle by Daryl / Dave

Code by	David Darnes
Demo & download	click here for code
Language used	HTML,CSS
External link / Dependencies	No
Responsive	No

Checkbox with a emoji to show the on or off state, when checkbox is turned on, the emoji rolls to the right side and changes from sad to happy face.

8. Full CSS checkbox

Code by	Timothee Guignard
Demo & download	click here for code
Language used	HTML(Haml),CSS(SCSS)
External link / Dependencies	No
Responsive	Yes

A full CSS checkbox button No JavaScript used. On click it rolls to the right side and the cross icon changes to the tick icon.

9. ON-OFF

Code by	Sikriti Dakua
Demo & download	click here for code
Language used	HTML,CSS(SCSS)
External link / Dependencies	Yes
Responsive	No

Simple turn on/off switch, On click the button turns into green with transition effect.

Create Wave Text Effect Using Simple HTML And CSS Code

10. +/- Toggle

Code by	Aaron Iker
Demo & download	click here for code
Language used	HTML,CSS(SCSS)
External link / Dependencies	No
Responsive	No

Another simple checkbox, +/- Toggle with transition effect on click made with SCSS no JavaScript used.

11. A checkbox animation

Code by	Himalaya Singh
Demo & download	click here for code
Language used	HTML,CSS
External link / Dependencies	No
Responsive	No

Checkbox animation created using HTML and CSS only, The check box changes from a red circle to a green tick on click.

12. Lock

Code by	Andreas Storm
Demo & download	click here for code
Language used	HTML(Pug),CSS(Stylus)
External link / Dependencies	No
Responsive	No

A checkbox with lock icon with changes depending on the state of check box with animation.

13. Gooey Checkbox (Chrome)

Code by	Andreas Storm
Demo & download	click here for code
Language used	HTML(Pug),CSS(Stylus)
External link / Dependencies	No
Responsive	No

A modern looking check box with animation made by Andreas Storm using HTML(Pug) and CSS(Stylus)

14. CSS Checkbox YES/NO

Code by	Víctor Silva
Demo & download	click here for code
Language used	HTML,CSS
External link / Dependencies	Yes
Responsive	No

A retro style Checkbox and label with CSS only to make a ON/OFF or YES/NO switch button. on click the state of button changes with smooth transition.

15+ Hamburger Icon ( Demo and Code)

15. Custom CSS Checkbox

Code by	Derek Morash
Demo & download	click here for code
Language used	HTML,CSS(Less)
External link / Dependencies	Yes
Responsive	Yes

Looking to make a list in which the the label/Text strikes off on click? This design is perfect for that, could be used to make todo list.

16 Clean CSS Checkbox

Code by	Jeff Powers
Demo & download	click here for code
Language used	HTML,CSS,JS
External link / Dependencies	No
Responsive	No

Last but not the least, a switch for apple fan boys. A clean design inspired from Cosmin Neagu’s iOS switch.

That’s it folks. In this article, we shared 15+ CSS Checkboxes with cool and different designs. We have covered everything from simple checkbox to check boxes with animations and emojis.

Hope you liked this article. Share this with your fellow developers. Comment down below your thoughts and suggestions, we would love to hear from you.

See our other articles on codewithrandom and gain knowledge in Front-End Development.

Thank you and keep Learning!!

follow us on Instagram : @codewith_random
Written by : @ayushgoel