FreeFrontend

55 CSS Checkboxes

February 15, 2017 | 24 Minute Read

55free HTML and CSS checkboxes. Demo and download code (*zip).

Demo Image: Realistic Switch
Realistic Switch (demo image)

Realistic Switch

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

download demo and code

See the Pen Realistic CSS Switch (checkbox) by Nathan Taylor (@nathantaylor) on CodePen.

Demo Image: Simple Checkbox Switcher
Simple Checkbox Switcher (demo image)

Simple Checkbox Switcher

Checkboxes with labels and little jQuery.
Made by Artyom
February 10, 2017

download demo and code

See the Pen simple checkbox switcher by Artyom (@Art292) on CodePen.

Demo Image: Happy Little Checkboxes
Happy Little Checkboxes (demo image)

Happy Little Checkboxes

Happy little jello checkboxes :) Feel free to use this code in your projects.
Made by Branko Stancevic
February 10, 2017

download demo and code

See the Pen Happy little checkboxes by Branko Stancevic (@landb) on CodePen.

Demo Image: Jelly Checkbox
Jelly Checkbox (demo image)

Jelly Checkbox

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

download demo and code

See the Pen Jelly Checkbox by Andreas Storm (@andreasstorm) on CodePen.

Demo Image: Full CSS Checkbox
Full CSS Checkbox (demo image)

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

download demo and code

See the Pen Full CSS checkbox by Timothee Guignard (@TimGuignard) on CodePen.

Demo Image: Switchy Checkbox
Switchy Checkbox (demo image)

Switchy Checkbox

HTML, CSS and JavaScript switchy checkbox.
Made by tiff
January 19, 2017

download demo and code

See the Pen Switchy checkbox by tiff (@tiffachoo) on CodePen.

Demo Image: Custom Checkboxes, Radio Buttons And Select Boxes
Custom Checkboxes, Radio Buttons And Select Boxes (demo image)

Custom Checkboxes, Radio Buttons And Select Boxes

Completely CSS: custom checkboxes, radio buttons and select boxes.
Made by Kenan Yusuf
January 18, 2017

download demo and code
Demo Image: All-CSS Toggle Switch
All-CSS Toggle Switch (demo image)

All-CSS Toggle Switch

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

download demo and code

See the Pen All-CSS Toggle Switch (Checkbox Hack) by Marcus Burnette (@mburnette) on CodePen.

Demo Image: Pure CSS Animated Checkbox
Pure CSS Animated Checkbox (demo image)

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

download demo and code

See the Pen Pure CSS Animated Checkbox by Paweł Durczok (@north-of-rapture) on CodePen.

Demo Image: Simple Checkbox
Simple Checkbox (demo image)

Simple Checkbox

Simple checkbox with CSS transition for it's states.
Made by Rafael Abensur
November 2, 2016

download demo and code

See the Pen #codevember 1 - checkcircle by Rafael Abensur (@abensur) on CodePen.

Demo Image: Realistics Checkboxes
Realistics Checkboxes (demo image)

Realistics Checkboxes

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

download demo and code
Demo Image: Elegantly Simple Checkbox
Elegantly Simple Checkbox (demo image)

Elegantly Simple Checkbox

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

download demo and code

See the Pen Elegantly simple checkbox by Bogdan (@bdan) on CodePen.

Demo Image: Google Material Style Checkbox (CSS Only)
Google Material Style Checkbox (CSS Only) (demo image)

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

download demo and code
Demo Image: Custom CSS Checkbox
Custom CSS Checkbox (demo image)

Custom CSS Checkbox

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

download demo and code

See the Pen Custom CSS Checkbox by Derek Morash (@derekmorash) on CodePen.

Demo Image: Pure CSS Checkboxes
Pure CSS Checkboxes (demo image)

Pure CSS Checkboxes

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

download demo and code

See the Pen Pure CSS toggle buttons by Mauricio Allende (@mallendeo) on CodePen.

Demo Image: SVG Checkbox
SVG Checkbox (demo image)

SVG Checkbox

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

download demo and code

See the Pen SVG Checkbox by GRAY GHOST (@grayghostvisuals) on CodePen.

Demo Image: Custom Checkbox
Custom Checkbox (demo image)

Custom Checkbox

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

download demo and code

See the Pen Custom Checkbox by mattdrose (@mattdrose) on CodePen.

Demo Image: Jquery Toggle Button
Jquery Toggle Button (demo image)

Jquery Toggle Button

iOS style toggle switch button using jQuery and CSS.
Made by Nikhil Krishnan
May 4, 2016

download demo and code

See the Pen Jquery Toggle Button by Nikhil Krishnan (@nikhil8krishnan) on CodePen.

Demo Image: Fluid Checkboxes
Fluid Checkboxes (demo image)

Fluid Checkboxes

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

download demo and code

See the Pen Fluid Checkboxes by Bjorn (@BjornRombaut) on CodePen.

Demo Image: Simple Checkbox
Simple Checkbox (demo image)

Simple Checkbox

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

download demo and code

See the Pen Just a simple checkbox by Pamela Dayne (@pamdayne) on CodePen.

Demo Image: Morphing CSS Checkbox
Morphing CSS Checkbox (demo image)

Morphing CSS Checkbox

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

download demo and code

See the Pen Morphing css checkbox by Sjoerd de Roij (@sderoij) on CodePen.

Demo Image: Switch In HTML, CSS And JavaScript
Switch In HTML, CSS And JavaScript (demo image)

Switch In HTML, CSS And JavaScript

Brightness and gamma switch.
Made by Joseph Shenton
April 5, 2016

download demo and code

See the Pen Brightness and Gamma Switch by Joseph Shenton (@JosephShenton) on CodePen.

Demo Image: Another Toggle
Another Toggle (demo image)

Another Toggle

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

download demo and code

See the Pen Another Toggle by MacKenzie Bobbitt (@macbobbitt_) on CodePen.

Demo Image: Custom Checkbox
Custom Checkbox (demo image)

Custom Checkbox

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

download demo and code

See the Pen Custom checkbox with svg marker by Tommy Rolchau Mathiesen (@rolchau) on CodePen.

Demo Image: Flat UI Checkbox
Flat UI Checkbox (demo image)

Flat UI Checkbox

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

download demo and code

See the Pen Flat UI - Checkbox FIX by Arsen Zbidniakov (@ARS) on CodePen.

Demo Image: Checkbox/Radio/Toggle Switches
Checkbox/Radio/Toggle Switches (demo image)

Checkbox/Radio/Toggle Switches

Variable based inputs - checkbox/radio/toggle switches.
Made by
January 9, 2016

download demo and code
Demo Image: Motion Checkbox
Motion Checkbox (demo image)

Motion Checkbox

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

download demo and code

See the Pen Motion Checkbox by Jonas Badalic (@JonasBadalic) on CodePen.

Demo Image: Checkbox Animation - CSS
Checkbox Animation - CSS (demo image)

Checkbox Animation - CSS

Only CSS animation not checked.
Made by Hoonseok Park
November 3, 2015

download demo and code

See the Pen Checkbox animation - CSS by Hoonseok Park (@parcon) on CodePen.

Demo Image: Switch Button
Switch Button (demo image)

Switch Button

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

download demo and code

See the Pen Switch button by Kyosuke (@ky0suke) on CodePen.

Demo Image: SVG Checkbox Animation
SVG Checkbox Animation (demo image)

SVG Checkbox Animation

SVG Remake of Nick Buturishvili's "Switch" dribbble shot.
Made by Jonas Badalic
October 8, 2015

download demo and code

See the Pen SVG Checkbox animation by Jonas Badalic (@JonasBadalic) on CodePen.

Demo Image: Gooey Toggle Switch
Gooey Toggle Switch (demo image)

Gooey Toggle Switch

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

download demo and code

See the Pen Gooey toggle switch by Vincent Durand (@onediv) on CodePen.

Demo Image: Pure CSS Toggles
Pure CSS Toggles (demo image)

Pure CSS Toggles

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

download demo and code

See the Pen Pure CSS Toggles by Rafael González (@rgg) on CodePen.

Demo Image: Custom Checkbox
Custom Checkbox (demo image)

Custom Checkbox

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

download demo and code

See the Pen Custom checkbox by Valery (@valerypatorius) on CodePen.

Demo Image: Checkbox Trickery: Simple Toggle
Checkbox Trickery: Simple Toggle (demo image)

Checkbox Trickery: Simple Toggle

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

download demo and code

See the Pen Checkbox Trickery: Simple Toggle by Will Boyd (@lonekorean) on CodePen.

Demo Image: Checkbox Style 2.0
Checkbox Style 2.0 (demo image)

Checkbox Style 2.0

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

download demo and code

See the Pen Checkbox Style 2.0 - SCSS by Lorenzo D'Ianni (@lorenzodianni) on CodePen.

Demo Image: Checkbox Button Toggle
Checkbox Button Toggle (demo image)

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

download demo and code

See the Pen Checkbox Button Toggle by Darren (@labithiotis) on CodePen.

Demo Image: Delightful Checkbox Animation
Delightful Checkbox Animation (demo image)

Delightful Checkbox Animation

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

download demo and code
Demo Image: 	Styling Checkboxes And Radio Buttons With CSS
Styling Checkboxes And Radio Buttons With CSS (demo image)

Styling Checkboxes And Radio Buttons With CSS

This pen shows how to style checkboxes and radio buttons with plain CSS.
Made by 8bit code
December 28, 2014

download demo and code
Demo Image: Animated Checkboxes
Animated Checkboxes (demo image)

Animated Checkboxes

Just some simple animated toggle elements.
Made by Jarad Light
November 23, 2014

download demo and code

See the Pen Animated Checkboxes by Jarad Light (@jaradlight) on CodePen.

Demo Image: Simple Styled Checkbox
Simple Styled Checkbox (demo image)

Simple Styled Checkbox

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

download demo and code

See the Pen Simple styled checkbox by Juan Cabrera (@cabrera) on CodePen.

Demo Image: Custom Checkbox
Custom Checkbox (demo image)

Custom Checkbox

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

download demo and code

See the Pen Custom Checkbox by André Cortellini (@AndreCortellini) on CodePen.

Demo Image: Animated CSS3 Checkbox
Animated CSS3 Checkbox (demo image)

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

download demo and code

See the Pen Animated CSS3 Checkbox by Jimmy Gillam (@theigmo87) on CodePen.

Demo Image: Checkbox
Checkbox (demo image)

Checkbox

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

download demo and code

See the Pen Checkbox by Kévin Chassagne (@KevinChassagne) on CodePen.

Demo Image: Checkbox With SVG
Checkbox With SVG (demo image)

Checkbox With SVG

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

download demo and code

See the Pen checkbox with svg by feng liang (@anhulife) on CodePen.

Demo Image: Using Pseudo Elements for Input Styling
Using Pseudo Elements for Input Styling (demo image)

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

download demo and code

See the Pen Using Pseudo Elements for Input Styling by Alex Bergin (@abergin) on CodePen.

Demo Image: Semantic Checkboxes
Semantic Checkboxes (demo image)

Semantic Checkboxes

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

download demo and code

See the Pen Semantic CSS Animated Checkboxes by Demetri Ganoff (@dganoff) on CodePen.

Demo Image: CSS-Only Animated Checkbox
CSS-Only Animated Checkbox (demo image)

CSS-Only Animated Checkbox

Another animated checkbox.
Made by Tim Severien
February 6, 2014

download demo and code

See the Pen CSS-only animated checkbox by Tim Severien (@timseverien) on CodePen.

Demo Image: Custom CSS Checkbox
Custom CSS Checkbox (demo image)

Custom CSS Checkbox

Checkbox with pure CSS.
Made by Wallace Erick
October 8, 2013

download demo and code

See the Pen Custom CSS Checkbox by Wallace Erick (@wallaceerick) on CodePen.

Demo Image: Stylish Checkbox
Stylish Checkbox (demo image)

Stylish Checkbox

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

download demo and code

See the Pen Stylish Checkbox by Stefan Judis (@stefanjudis) on CodePen.

Demo Image: Flat Toggle Switch
Flat Toggle Switch (demo image)

Flat Toggle Switch

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

download demo and code

See the Pen Flat Toggle Switch by Felix De Montis (@dervondenbergen) on CodePen.

Demo Image: Day & Night Checkbox
Day & Night Checkbox (demo image)

Day & Night Checkbox

Day & Night Checkbox with HTML, CSS and JavaScript.
Made by Lionel T
July 6, 2013

download demo and code

See the Pen Day & Night Checkbox by Lionel T (@elrumordelaluz) on CodePen.

Demo Image: Checkbox CSS
Checkbox CSS (demo image)

Checkbox CSS

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

download demo and code

See the Pen Checkbox css by pixelslip (@pixelslip) on CodePen.

Demo Image: Survys Rebound Checkbox
Survys Rebound Checkbox (demo image)

Survys Rebound Checkbox

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

download demo and code

See the Pen Survys rebound checkbox by Lionel T (@elrumordelaluz) on CodePen.

Demo Image: Animated Ubuntu Touch-Styled Checkboxes
Animated Ubuntu Touch-Styled Checkboxes (demo image)

Animated Ubuntu Touch-Styled Checkboxes

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

download demo and code
Demo Image: Clean CSS Checkbox
Clean CSS Checkbox (demo image)

Clean CSS Checkbox

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

download demo and code

See the Pen Clean CSS Checkbox by Jeff Powers (@jeffpowrs) on CodePen.