Collection of free HTML and CSS custom checkbox examples: with image, with label, checked, etc. Update of February 2020 collection. 8 new items.
Related Articles
Links
Made with
- HTML / CSS
About a code
Animation Features Update Dashboard Page
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML (Pug) / CSS (SCSS)
About a code
Checkbox Card
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Links
Made with
- HTML / CSS (SCSS)
About a code
Accessible Custom Toggle Switch
This example shows how to markup and style a semantic checkbox to look and behave like a toggle switch.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS (SCSS)
About a code
Check
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS (SCSS)
About a code
ON-OFF
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Links
Made with
- HTML / CSS (SCSS)
About a code
Pure CSS: Custom Accessible Checkboxes
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS (SCSS)
About a code
Bounce Checkbox
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Links
Made with
- HTML / CSS (SCSS)
About a code
Checklist Animation - Only CSS
Simple checklist animation.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Links
Made with
- HTML / CSS (SCSS)
About a code
Todo Checkbox
Todo checkbox with a text fill hover and strikethrough effect when checked.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS (SCSS)
About a code
+/- Toggle
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Links
Made with
- HTML (Pug) / CSS (Stylus)
About a code
Gooey Checkbox
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Links
Made with
- HTML / CSS (SCSS)
About a code
Neuomorphic Checkboxes
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: font-awesome.css
Links
Made with
- HTML / CSS (SCSS)
About a code
2020 Toggles
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Links
Made with
- HTML / CSS (SCSS)
About a code
Neumorphic Design
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Links
Made with
- HTML / CSS (SCSS)
About a code
Checkboxes
Micro-interaction is a couple variations on a classic checkbox.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Links
Made with
- HTML (Pug) / CSS (Sass)
About a code
Checkmark
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS
About a code
Checkbox Animation
Checkbox animation created using HTML and CSS only.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Links
Made with
- HTML (Pug) / CSS (Stylus)
About a code
Checkbox
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS (SCSS)
About a code
Checkbox
Simple checkbox with animation.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Links
Made with
- HTML / CSS (SCSS)
About a code
Fancy Checkbox
Uses only a checkbox input
and label
(so it's accessible by default) inside a form
(as blending directly with the body
is buggy).
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Links
Made with
- HTML (Pug) / CSS (Stylus)
About the code
Lock Checkbox
Lock - pure CSS micro interaction made with HTML checkbox and SVG.
Compatible browsers: Chrome, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML (Pug) / CSS (Stylus)
About the code
Flip Checkbox
Flip checkbox in HTML and CSS.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML (Pug) / CSS (SCSS)
About the code
Checkbox
Pure CSS animated checkbox.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS
About the code
Chippy Checkbox Inputs
I had occasion to create a field of checkboxes recently for a form and thought I would try to have a little fun with the styling.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: font-awesome.css
Links
Made with
- HTML / CSS (SCSS)
About the code
Toggle Checkbox Animation
Toggle check button. Sweet animation, smooth and right speed.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS
About the code
Fancy Checkboxes and Radio Buttons
It's been decades — checkboxes and radio buttons still look terrible and don't play well without some love. Starting with well-formed HTML, look what we can do with a bit of style and some Font Awesome glyphs...
Compatible browsers: Chrome, Firefox, Opera, Safari
Responsive: yes
Dependencies: font-awesome.css
Links
Made with
- HTML / CSS
About the code
Pure CSS Checkboxes
I've used nested span elements for creating an animation of square turn and creating an arrow animation.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML (Pug) / CSS (Sass)
About the code
Emojibox - Checkbox with Emojis
Checkbox with emojis (without JS). Create more expressive checkboxes with emojis. They combine the simplicity of checkboxes for the user with the expressiveness of emojis. It makes use of checkbox and radio button to create a binary or non-binary selection. Animations are done with CSS transitions.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: font-awesome.css

Links
Made with
- HTML
- CSS/Sass
About the code
CSS Toggle
Material design CSS toggle.

Links
Made with
- HTML
- CSS/Stylus
About the code
CSS Design Checkbox
CSS material design checkbox.

Links
Made with
- HTML
- CSS/Sass
About the code
Checkbox
CSS checkbox.

Links
Made with
- HTML/Haml
- CSS/SCSS
About the code
Pure CSS Skateboard Checkbox
Built with pure css and a bit of patience.

Links
Made with
- HTML
- CSS/SCSS
About the code
Toggles
Useful toggle.

Links
Made with
- HTML
- CSS
About the code
Toggle
Nice smooth movement and the added detail with the animated turn on the head. Based on "Toggle" by Daryl Ginn.

Links
Made with
- HTML
- CSS/SCSS
About the code
Toggle
Pure CSS toggle switch.

Links
Made with
- HTML/Pug
- CSS/SCSS
About the code
Cool Checkbox With SVG
A custom checkbox that makes use of SVG to animate the tick inside of it.

Links
Made with
- HTML
- CSS/SCSS
About the code
CSS Toggle Switch
CSS soft toggle switch.

Links
Made with
- HTML
- CSS
About the code
Emoji Checkbox
Pure CSS emoji checkbox.

Links
Made with
- HTML
- CSS/SCSS
About the code
Material Inspired Checkboxes
The trick to this is placing the label after the checkbox. That way you can use the :checked
state to toggle the different pseudo elements on the label. No javascript necessary. To make the background animation work, you'll need a tiny bit of magic. The label:before
element is a small 10x10 circle. We animate the scale of it instead of the size so that we can keep the proportion of the circle and make it look like it "fills out" the bar. The max width of the form is set to 550px. The :before
element animates by using scale3d
(for hardware acceleration) by 56 times. 56 * 10 === 560. This allows the circle to fill out the bar by going slightly outside the bounds of the input group container.

Links
Made with
- HTML
- CSS/SCSS
About the code
Check Boxes
Pure CSS checkboxes.

Links
Made with
- HTML
- CSS
About the code
Custom Checkbox/Toggle Switch
Collection of four toggle switches made with HTML and CSS without a single line of JavaScript. Two of the switches are made with the help of SVG also.
Links
Made with
- HTML / CSS (SCSS)
About a code
Pure CSS3 Checkboxes with FontAwesome
Pure CSS3 checkboxes with FontAwesome and transitions.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: font-awesome.css

Links
Made with
- HTML
- CSS/SCSS
About the code
Radio and Checkbox Styles
Simple shape styles for radio and checkbox buttons.

Links
Made with
- HTML
- CSS/SCSS
About the code
Style Checkboxes
Style Checkboxes - using CSS custom properties.

Links
Made with
- HTML/Pug
- CSS/SCSS
About the code
3D Switcher Vll Plus
Use CSS variables to control states.

Links
Made with
- HTML
- CSS/LESS
About the code
Checkmark Animation
Pure CSS checkbox animation.

Links
Made with
- HTML
- CSS/Sass
- SVG
About the code
Checkbox SVG Path Animation
HTML and CSS checkbox with SVG path animation.

Links
Made with
- HTML/Pug
- CSS/SCSS
- SVG
About the code
Pure CSS Toggle Slider
Pure CSS Toggle slider/checkbox with SVG tick and cross.

Realistic Switch
Realistic CSS switch (checkbox).
Made by Nathan Taylor
February 19, 2017

Jelly Checkbox
Jelly checkbox with HTML and CSS.
Made by Andreas Storm
February 8, 2017

Full CSS Checkbox
A full css checkbox button. You'll find: - SVG Background -css transition - pseudo element - no JS.
Made by Timothee Guignard
February 5, 2017

Custom Checkboxes, Radio Buttons And Select Boxes
Completely CSS: custom checkboxes, radio buttons and select boxes.
Made by Kenan Yusuf
January 18, 2017

All-CSS Toggle Switch
All-CSS toggle switch (checkbox hack).
Made by Marcus Burnette
January 12, 2017

Pure CSS Animated Checkbox
A pure html/css animated checkbox created for the audience of North of Rapture blog.
Made by Paweł Durczok
January 9, 2017

Realistics Checkboxes
Realistics checkboxes with only CSS.
Made by Twikito
October 19, 2016

Elegantly Simple Checkbox
Elegantly simple checkbox with HTML and CSS.
Made by Bogdan
August 19, 2016

Google Material Style Checkbox (CSS Only)
Checkboxes based upon the material design implementation of the polymer checkboxes. They don't fully replicate these but are just an exercise to imitate them with just css. These only work in chrome :)
Made by Sam
August 12, 2016

Custom CSS Checkbox
Custom HTML and CSS checkbox.
Made by Derek Morash
August 7, 2016

Pure CSS Checkboxes
Pure HTML and CSS toggle buttons.
Made by Mauricio Allende
June 17, 2016

SVG Checkbox
Checkbox used for SitePoint article on styling form controls with Sass.
Made by GRAY GHOST
June 10, 2016

Custom Checkbox
Custom checkboxes that would work well with an icon font. Modern browser support with IE6+ fallback.
Made by mattdrose
May 31, 2016

Fluid Checkboxes
Was wondering if the animation was possible with pure CSS/HTML checkboxes.
Made by Bjorn
April 18, 2016

Simple Checkbox
Just a simple HTML and CSS checkbox.
Made by Pamela Dayne
April 15, 2016

Morphing CSS Checkbox
HTML & CSS morphing checkbox.
Made by Sjoerd de Roij
April 5, 2016

Another Toggle
Toggle with HTML and CSS.
Made by MacKenzie Bobbitt
February 19, 2016

Custom Checkbox
Custom checkbox with SVG marker.
Made by Tommy Rolchau Mathiesen
February 5, 2016

Flat UI Checkbox
Flat UI checkbox with HTML and CSS.
Made by Arsen Zbidniakov
January 19, 2016

Motion Checkbox
A motion checkbox remake of Mark Lamb's dribble shot before bedtime!
Made by Jonas Badalic
November 4, 2015

Switch Button
A pretty switch button.
Made by Kyosuke
November 3, 2015

Gooey Toggle Switch
Gooey checkbox CSS only.
Made by Vincent Durand
September 14, 2015

Pure CSS Toggles
Getting fun with some animations & transitions :)
Made by Rafael González
July 22, 2015

Custom Checkbox
Empty box transforms into check. No additional markup, just input, label for it and some CSS.
Made by Valery
June 20, 2015

Checkbox Trickery: Simple Toggle
Basic formula for controlling the look and feel of a checkbox. No JavaScript.
Made by Will Boyd
June 16, 2015

Checkbox Style 2.0
Checkbox style in HTML and CSS.
Made by Lorenzo D'Ianni
June 4, 2015

Checkbox Button Toggle
Responsive checkbox set by font size, easily set the inner text for on and off states.
Made by Darren
May 12, 2015

Delightful Checkbox Animation
Neat little checkboxes with pleasing SVG-less animation.
Made by Dylan Raga
February 1, 2015

Simple Styled Checkbox
Simple styled checkbox with HTML and CSS.
Made by Juan Cabrera
October 27, 2014

Custom Checkbox
Very easy custom checkbox. Only using HTML & CSS.
Made by André Cortellini
September 4, 2014

Animated CSS3 Checkbox
CSS3 animated (except IE9) checkbox that can be used as a class on a label for a checkbox (to manipulate the value of the checkbox) or can be used as a class on a standalone element, and toggled by adding a class via javascript.
Made by Jimmy Gillam
June 10, 2014

Checkbox
Checkbox full CSS with transition.
Made by Kévin Chassagne
June 5, 2014

Checkbox With SVG
Checkbox with HTML, CSS and SVG.
Made by feng liang
May 13, 2014

Using Pseudo Elements for Input Styling
On supported browsers, the pseudo elements can be used to style the inputs for checkbox/radio for their checked and unchecked states while still providing a functional fallback for browsers that don't support input styling without doing weird resets.
Made by Alex Bergin
April 19, 2014

Semantic Checkboxes
Semantic CSS animated checkboxes.
Made by Demetri Ganoff
March 30, 2014

CSS-Only Animated Checkbox
Another animated checkbox.
Made by Tim Severien
February 6, 2014
Links
Made with
- HTML / CSS
About a code
Chekboxes CSS
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -

Stylish Checkbox
CSS only checkbox.
Made by Stefan Judis
September 22, 2013

Flat Toggle Switch
Remake of the Dribbble shot Flat Toggle Switch by Joshua Andrew Davies.
Made by Felix De Montis
September 6, 2013

Checkbox CSS
Custom checkbox with style …
Made by pixelslip
June 12, 2013

Survys Rebound Checkbox
Absolutely CSS checkbox.
Made by Lionel T
June 9, 2013

Animated Ubuntu Touch-Styled Checkboxes
Animated Ubuntu touch-styled checkboxes with HTML and CSS.
Made by Eduard Mayer
May 26, 2013

Clean CSS Checkbox
Clean HTML and CSS checkbox.
Made by Jeff Powers
August 25, 2012