February 27, 2020

83 Checkboxes CSS

Collection of free HTML and CSS custom checkbox examples: with image, with label, checked, etc. Update of February 2019 collection. 14 new items.

Related Articles

Author Katherine Kato

February 17, 2020 Links demo and code 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: -

Author Aaron Iker

January 31, 2020 Links demo and code

dribbble shot Made with HTML / CSS (SCSS) About a code +/- Toggle Compatible browsers: Chrome, Edge, Firefox, Opera, Safari Responsive: no Dependencies: -

Author Andreas Storm

January 29, 2020 Links demo and code Made with HTML (Pug) / CSS (Stylus) About a code Gooey Checkbox Compatible browsers: Chrome, Edge, Firefox, Opera, Safari Responsive: no Dependencies: -

Author Braydon Coyer

January 28, 2020 Links demo and code Made with HTML / CSS (SCSS) About a code Neuomorphic Checkboxes Compatible browsers: Chrome, Edge, Firefox, Opera, Safari Responsive: no Dependencies: font-awesome.css

Author Aaron Iker

January 11, 2020 Links demo and code Made with HTML / CSS (SCSS) About a code 2020 Toggles Compatible browsers: Chrome, Edge, Firefox, Opera, Safari Responsive: no Dependencies: -

Author Chris Weissenberger

December 23, 2019 Links demo and code

dribbble shot Made with HTML / CSS (SCSS) About a code Neumorphic Design Compatible browsers: Chrome, Edge, Firefox, Opera, Safari Responsive: no Dependencies: -

Author Aaron Iker

December 9, 2019 Links demo and code

dribbble shot 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: -

Author Andreas Storm

October 3, 2019 Links demo and code Made with HTML (Pug) / CSS (Sass) About a code Checkmark Compatible browsers: Chrome, Edge, Firefox, Opera, Safari Responsive: yes Dependencies: -

Author Himalaya Singh

June 29, 2019 Links demo and code 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: -

Author Andreas Storm

June 15, 2019 Links demo and code Made with HTML (Pug) / CSS (Stylus) About a code Checkbox Compatible browsers: Chrome, Edge, Firefox, Opera, Safari Responsive: yes Dependencies: -

Author Mohammadreza Ziadzadeh

June 15, 2019 Links demo and code Made with HTML / CSS (SCSS) About a code Checkbox Simple checkbox with animation. Compatible browsers: Chrome, Edge, Firefox, Opera, Safari Responsive: no Dependencies: -

Author Ana Tudor

June 6, 2019 Links demo and code 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: -

Author Andreas Storm

February 6, 2019 Links demo and code

dribbble shot 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: -

Author Andreas Storm

February 9, 2019 Links demo and code

dribbble shot 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: -

Author @mandycodestoo

December 2, 2018 Links demo and code Made with HTML (Pug) / CSS (SCSS) About the code Checkbox Pure CSS animated checkbox. Compatible browsers: Chrome, Edge, Firefox, Opera, Safari Responsive: yes Dependencies: -

Author Adam Quinlan

October 18, 2018 Links demo and code 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

Author Aaron Iker

September 20, 2018 Links demo and code

dribbble shot 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: -

Author Jase

August 23, 2018 Links demo and code 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

Author Stas Melnikov

July 18, 2018 Links demo and code 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: -

Author Jouan Marcel

July 5, 2018 Links demo and code 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

Author Andreas Storm

May 9, 2018 Links demo and code Made with HTML

CSS/Sass About the code CSS Toggle Material design CSS toggle.

Author Andreas Storm

May 3, 2018 Links demo and code Made with HTML

CSS/Stylus About the code CSS Design Checkbox CSS material design checkbox.

Author Andreas Storm

April 18, 2018 Links demo and code Made with HTML

CSS/Sass About the code Checkbox CSS checkbox.

Author Adam Kuhn

April 17, 2018 Links demo and code Made with HTML/Haml

CSS/SCSS About the code Pure CSS Skateboard Checkbox Built with pure css and a bit of patience.

Author Adam Kuhn

February 1, 2018 Links demo and code Made with HTML

CSS/SCSS About the code Toggles Useful toggle.

Author David Darnes

March 13, 2018 Links demo and code 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.

Author Katherine Kato

March 9, 2018 Links demo and code Made with HTML

CSS/SCSS About the code Toggle Pure CSS toggle switch.

Author Luis Adame

February 18, 2018 Links demo and code 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.

Author Ana Tudor

February 15, 2018 Links demo and code Made with HTML

CSS/SCSS About the code CSS Toggle Switch CSS soft toggle switch.

Author Brett Commandeur

February 13, 2018 Links demo and code Made with HTML

CSS About the code Emoji Checkbox Pure CSS emoji checkbox.

Author Buddy Reno

September 12, 2017 Links demo and code 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.

Author Leonard Meagher

28.08.2017 Links download

demo and code Made with HTML

CSS/SCSS About the code Check Boxes Pure CSS checkboxes.

Author thelaazyguy

26.08.2017 Links download

demo and code 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.

Author foxeisen

August 6, 2017 Links demo and code 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

Author Matthew Shields

25.06.2017 Links download

demo and code Made with HTML

CSS/SCSS About the code Radio and Checkbox Styles Simple shape styles for radio and checkbox buttons.

Author Katheer Mizal

21.06.2017 Links download

demo and code Made with HTML

CSS/SCSS About the code Style Checkboxes Style Checkboxes - using CSS custom properties.

Author Rplus

18.06.2017 Links download

demo and code Made with HTML/Pug

CSS/SCSS About the code 3D Switcher Vll Plus Use CSS variables to control states.

Author Danian

15.06.2017 Links download

demo and code Made with HTML

CSS/LESS About the code Checkmark Animation Pure CSS checkbox animation.

Author Andreas Storm

12.06.2017 Links download

demo and code Made with HTML

CSS/Sass

SVG About the code Checkbox SVG Path Animation HTML and CSS checkbox with SVG path animation.

Author Ian Egner

31.05.2017 Links download

demo and code Made with HTML/Pug

CSS/SCSS

SVG About the code Pure CSS Toggle Slider Pure CSS Toggle slider/checkbox with SVG tick and cross.

Demo Image: Realistic Switch

Realistic Switch

Realistic CSS switch (checkbox).

Made by Nathan Taylor

February 19, 2017

Demo Image: Jelly Checkbox

Jelly Checkbox

Jelly checkbox with HTML and CSS.

Made by Andreas Storm

February 8, 2017

Demo Image: Full CSS Checkbox

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

Demo Image: Custom Checkboxes, Radio Buttons And Select Boxes

Custom Checkboxes, Radio Buttons And Select Boxes

Completely CSS: custom checkboxes, radio buttons and select boxes.

Made by Kenan Yusuf

January 18, 2017

Demo Image: All-CSS Toggle Switch

All-CSS Toggle Switch

All-CSS toggle switch (checkbox hack).

Made by Marcus Burnette

January 12, 2017

Demo Image: Pure CSS Animated Checkbox

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

Demo Image: Realistics Checkboxes

Realistics Checkboxes

Realistics checkboxes with only CSS.

Made by Twikito

October 19, 2016

Demo Image: Elegantly Simple Checkbox

Elegantly Simple Checkbox

Elegantly simple checkbox with HTML and CSS.

Made by Bogdan

August 19, 2016

Demo Image: Google Material Style Checkbox (CSS Only)

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

Demo Image: Custom CSS Checkbox

Custom CSS Checkbox

Custom HTML and CSS checkbox.

Made by Derek Morash

August 7, 2016

Demo Image: Pure CSS Checkboxes

Pure CSS Checkboxes

Pure HTML and CSS toggle buttons.

Made by Mauricio Allende

June 17, 2016

Demo Image: SVG Checkbox

SVG Checkbox

Checkbox used for SitePoint article on styling form controls with Sass.

Made by GRAY GHOST

June 10, 2016

Demo Image: Custom Checkbox

Custom Checkbox

Custom checkboxes that would work well with an icon font. Modern browser support with IE6+ fallback.

Made by mattdrose

May 31, 2016

Demo Image: Fluid Checkboxes

Fluid Checkboxes

Was wondering if the animation was possible with pure CSS/HTML checkboxes.

Made by Bjorn

April 18, 2016

Demo Image: Simple Checkbox

Simple Checkbox

Just a simple HTML and CSS checkbox.

Made by Pamela Dayne

April 15, 2016

Demo Image: Morphing CSS Checkbox

Morphing CSS Checkbox

HTML & CSS morphing checkbox.

Made by Sjoerd de Roij

April 5, 2016

Demo Image: Another Toggle

Another Toggle

Toggle with HTML and CSS.

Made by MacKenzie Bobbitt

February 19, 2016

Demo Image: Custom Checkbox

Custom Checkbox

Custom checkbox with SVG marker.

Made by Tommy Rolchau Mathiesen

February 5, 2016

Demo Image: Flat UI Checkbox

Flat UI Checkbox

Flat UI checkbox with HTML and CSS.

Made by Arsen Zbidniakov

January 19, 2016

Demo Image: Motion Checkbox

Motion Checkbox

A motion checkbox remake of Mark Lamb's dribble shot before bedtime!

Made by Jonas Badalic

November 4, 2015

Demo Image: Switch Button

Switch Button

A pretty switch button.

Made by Kyosuke

November 3, 2015

Demo Image: Gooey Toggle Switch

Gooey Toggle Switch

Gooey checkbox CSS only.

Made by Vincent Durand

September 14, 2015

Demo Image: Pure CSS Toggles

Pure CSS Toggles

Getting fun with some animations & transitions :)

Made by Rafael González

July 22, 2015

Demo Image: Custom Checkbox

Custom Checkbox

Empty box transforms into check. No additional markup, just input, label for it and some CSS.

Made by Valery

June 20, 2015

Demo Image: Checkbox Trickery: Simple Toggle

Checkbox Trickery: Simple Toggle

Basic formula for controlling the look and feel of a checkbox. No JavaScript.

Made by Will Boyd

June 16, 2015

Demo Image: Checkbox Style 2.0

Checkbox Style 2.0

Checkbox style in HTML and CSS.

Made by Lorenzo D'Ianni

June 4, 2015

Demo Image: Checkbox Button Toggle

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

Demo Image: Delightful Checkbox Animation

Delightful Checkbox Animation

Neat little checkboxes with pleasing SVG-less animation.

Made by Dylan Raga

February 1, 2015

Demo Image: Simple Styled Checkbox

Simple Styled Checkbox

Simple styled checkbox with HTML and CSS.

Made by Juan Cabrera

October 27, 2014

Demo Image: Custom Checkbox

Custom Checkbox

Very easy custom checkbox. Only using HTML & CSS.

Made by André Cortellini

September 4, 2014

Demo Image: Animated CSS3 Checkbox

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

Demo Image: Checkbox

Checkbox

Checkbox full CSS with transition.

Made by Kévin Chassagne

June 5, 2014

Demo Image: Checkbox With SVG

Checkbox With SVG

Checkbox with HTML, CSS and SVG.

Made by feng liang

May 13, 2014

Demo Image: Using Pseudo Elements for Input Styling

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

Demo Image: Semantic Checkboxes

Semantic Checkboxes

Semantic CSS animated checkboxes.

Made by Demetri Ganoff

March 30, 2014

Demo Image: CSS-Only Animated Checkbox

CSS-Only Animated Checkbox

Another animated checkbox.

Made by Tim Severien

February 6, 2014

Author Pedro Campos

January 15, 2014 Links demo and code Made with HTML / CSS About a code Chekboxes CSS Compatible browsers: Chrome, Edge, Firefox, Opera, Safari Responsive: no Dependencies: -

Demo Image: Stylish Checkbox

Stylish Checkbox

CSS only checkbox.

Made by Stefan Judis

September 22, 2013

Demo Image: Flat Toggle Switch

Flat Toggle Switch

Remake of the Dribbble shot Flat Toggle Switch by Joshua Andrew Davies.

Made by Felix De Montis

September 6, 2013

Demo Image: Checkbox CSS

Checkbox CSS

Custom checkbox with style …

Made by pixelslip

June 12, 2013

Demo Image: Survys Rebound Checkbox

Survys Rebound Checkbox

Absolutely CSS checkbox.

Made by Lionel T

June 9, 2013

Demo Image: Animated Ubuntu Touch-Styled Checkboxes

Animated Ubuntu Touch-Styled Checkboxes

Animated Ubuntu touch-styled checkboxes with HTML and CSS.

Made by Eduard Mayer

May 26, 2013

Demo Image: Clean CSS Checkbox

Clean CSS Checkbox

Clean HTML and CSS checkbox.

Made by Jeff Powers

August 25, 2012