You are currently viewing 15+ Checkbox Styles With CSS Code

15+ Checkbox Styles With CSS Code

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

Leave a Reply