48+ CSS Checkboxes - csshint

Browse 48+ free HTML and CSS custom checkbox examples: with image, material ui checkbox, with label, checked, etc.

1.Touch-styled checkboxes

See the Pen <a href='https://codepen.io/codewunder/pen/wJjBk/'>Animated Ubuntu Touch-styled checkboxes</a> by Eduard Mayer (<a href='https://codepen.io/codewunder'>@codewunder</a>) on <a href='https://codepen.io/'>CodePen</a>.

Author

Eduard Mayer

Made with

HTML / CSS

demo and code Get Hosting

2.Cardboard Check Box

See the Pen <a href='https://codepen.io/simeydotme/pen/ZjyvXa/'>Cardboard Check Box</a> by Simon Goellner (<a href='https://codepen.io/simeydotme'>@simeydotme</a>) on <a href='https://codepen.io/'>CodePen</a>.

Author

Simon Goellner

Made with

HTML / CSS (SCSS) / JavaScript

demo and code Get Hosting

3.Pure CSS Checkboxes

See the Pen <a href='https://codepen.io/melnik909/pen/YjGZqQ/'>#CodePenChallenge | Pure CSS Checkboxes</a> by Stas Melnikov (<a href='https://codepen.io/melnik909'>@melnik909</a>) on <a href='https://codepen.io/'>CodePen</a>.

Author

Stas Melnikov

Made with

HTML / CSS

demo and code Get Hosting

4.Checkbox with emojis

See the Pen <a href='https://codepen.io/jouanmarcel/pen/MXdreK/'>✅ Emojibox – Checkbox with emojis</a> by Jouan Marcel (<a href='https://codepen.io/jouanmarcel'>@jouanmarcel</a>) on <a href='https://codepen.io/'>CodePen</a>.

Author

Jouan Marcel

Made with

HTML(Pug) / CSS(Sass)

demo and code Get Hosting

5.Material Design Checkbox

See the Pen <a href='https://codepen.io/andreasstorm/pen/deRvMy/'>Material Design Checkbox</a> by Andreas Storm (<a href='https://codepen.io/andreasstorm'>@andreasstorm</a>) on <a href='https://codepen.io/'>CodePen</a>.

Author

Andreas Storm

Made with

HTML / CSS(Stylus)

demo and code Get Hosting

6.Toggle Button Animation

See the Pen <a href='https://codepen.io/aaroniker/pen/rZPeYQ/'>Toggle Button Animation</a> by Aaron Iker (<a href='https://codepen.io/aaroniker'>@aaroniker</a>) on <a href='https://codepen.io/'>CodePen</a>.

Author

Aaron Iker

Made with

HTML / CSS(Sass) / JS

demo and code Get Hosting

7.Pure CSS Skateboard Checkbox

See the Pen <a href='https://codepen.io/cobra_winfrey/pen/jxNLPo/'>Pure CSS Skateboard Checkbox</a> by Adam Kuhn (<a href='https://codepen.io/cobra_winfrey'>@cobra_winfrey</a>) on <a href='https://codepen.io/'>CodePen</a>.

Author

Adam Kuhn

Made with

HTML(Haml) / CSS(Scss) / JS

demo and code Get Hosting

8.Dumb Toggles

See the Pen <a href='https://codepen.io/cobra_winfrey/pen/wyKywZ/'>Dumb Toggles</a> by Adam Kuhn (<a href='https://codepen.io/cobra_winfrey'>@cobra_winfrey</a>) on <a href='https://codepen.io/'>CodePen</a>.

Author

Adam Kuhn

Made with

HTML / CSS(Scss) / JS

demo and code Get Hosting

9.Cool Checkbox with SVG!

See the Pen <a href='https://codepen.io/lewis_adame/pen/BYYNgP/'>Cool Checkbox with SVG!</a> by Luis Adame (<a href='https://codepen.io/lewis_adame'>@lewis_adame</a>) on <a href='https://codepen.io/'>CodePen</a>.

Author

Luis Adame

Made with

HTML(Pug) / CSS(Scss) / JS

demo and code Get Hosting

10.Check Boxes

See the Pen <a href='https://codepen.io/LeonardMeagher2/pen/NvOLZr/'>Check Boxes</a> by Leonard Meagher (<a href='https://codepen.io/LeonardMeagher2'>@LeonardMeagher2</a>) on <a href='https://codepen.io/'>CodePen</a>.

Author

Leonard Meagher

Made with

HTML / CSS(Scss) / JS

demo and code Get Hosting

11.Custom Checkbox / Toggle Switch

See the Pen <a href='https://codepen.io/thelaazyguy/pen/MvqpPr/'>Custom Checkbox / Toggle Switch</a> by thelaazyguy (<a href='https://codepen.io/thelaazyguy'>@thelaazyguy</a>) on <a href='https://codepen.io/'>CodePen</a>.

Author

thelaazyguy

Made with

HTML / CSS

demo and code Get Hosting

12.Radio and Checkbox Styles

See the Pen <a href='https://codepen.io/MatthewShields/pen/XgeRWj/'>Radio and Checkbox Styles</a> by Matthew Shields (<a href='https://codepen.io/MatthewShields'>@MatthewShields</a>) on <a href='https://codepen.io/'>CodePen</a>.

Author

Matthew Shields

Made with

HTML / CSS(SCSS)

demo and code Get Hosting

13.Style Checkboxes using CSS

See the Pen <a href='https://codepen.io/katheer/pen/jwwNZL/'>Style Checkboxes – using CSS custom properties</a> by Katheer Mizal (<a href='https://codepen.io/katheer'>@katheer</a>) on <a href='https://codepen.io/'>CodePen</a>.

Author

Katheer Mizal

Made with

HTML / CSS(SCSS)

demo and code Get Hosting

14.3D Switcher Vll Plus

See the Pen <a href='https://codepen.io/Rplus/pen/vZgMxM/'>[CSS] 3D Switcher Vll Plus</a> by Rplus (<a href='https://codepen.io/Rplus'>@Rplus</a>) on <a href='https://codepen.io/'>CodePen</a>.

Author

Rplus

Made with

HTML(Pug) / CSS(SCSS)

demo and code Get Hosting

15.CSS Checkmark Animation

See the Pen <a href='https://codepen.io/daniandl/pen/OgbXzK/'>CSS Checkmark Animation</a> by Danian (<a href='https://codepen.io/daniandl'>@daniandl</a>) on <a href='https://codepen.io/'>CodePen</a>.

Author

Danian

Made with

HTML / CSS(Less)

demo and code Get Hosting

16.Checkbox SVG Path Animation

See the Pen <a href='https://codepen.io/andreasstorm/pen/Mowqre/'>Checkbox SVG Path Animation</a> by Andreas Storm (<a href='https://codepen.io/andreasstorm'>@andreasstorm</a>) on <a href='https://codepen.io/'>CodePen</a>.

Author

Andreas Storm

Made with

HTML / CSS(SASS)

demo and code Get Hosting

17.Pure CSS Toggle slider/checkbox

See the Pen <a href='https://codepen.io/webdevian/pen/NjQdKK/'>Pure CSS Toggle slider/checkbox with SVG tick and cross</a> by Ian Egner (<a href='https://codepen.io/webdevian'>@webdevian</a>) on <a href='https://codepen.io/'>CodePen</a>.

Author

Ian Egner

Made with

HTML / CSS(SASS)

demo and code Get Hosting

18.little checkboxes

See the Pen <a href='https://codepen.io/landb/pen/pRQPNX/'>Happy little checkboxes (updated)</a> by Branko Stancevic (<a href='https://codepen.io/landb'>@landb</a>) on <a href='https://codepen.io/'>CodePen</a>.

Author

Branko Stancevic

Made with

HTML(Pug) / CSS(SASS) / JS

demo and code Get Hosting

19.Full CSS checkbox

See the Pen <a href='https://codepen.io/TimGuignard/pen/pRKdvV/'>Full CSS checkbox</a> by Timothee Guignard (<a href='https://codepen.io/TimGuignard'>@TimGuignard</a>) on <a href='https://codepen.io/'>CodePen</a>.

Author

Timothee Guignard

Made with

HTML(Haml) / CSS(SCSS) / JS

demo and code Get Hosting

20.Custom checkboxes, Radio buttons

See the Pen <a href='https://codepen.io/KenanYusuf/pen/PZKEKd/'>Completely CSS: Custom checkboxes, radio buttons and select boxes</a> by Kenan Yusuf (<a href='https://codepen.io/KenanYusuf'>@KenanYusuf</a>) on <a href='https://codepen.io/'>CodePen</a>.

Author

Kenan Yusuf

Made with

HTML / CSS(Stylus) / JS

demo and code Get Hosting

21.Pure CSS Animated Checkbox

See the Pen <a href='https://codepen.io/north-of-rapture/pen/rWqega/'>Pure CSS Animated Checkbox</a> by Paweł Durczok (<a href='https://codepen.io/north-of-rapture'>@north-of-rapture</a>) on <a href='https://codepen.io/'>CodePen</a>.

Author

Paweł Durczok

Made with

HTML / CSS(SCSS) / JS

demo and code Get Hosting

22.simple checkbox

See the Pen <a href='https://codepen.io/bdan/pen/jAkZZK/'>Elegantly simple checkbox</a> by Bogdan (<a href='https://codepen.io/bdan'>@bdan</a>) on <a href='https://codepen.io/'>CodePen</a>.

Author

Bogdan

Made with

HTML / CSS(Less) / JS

demo and code Get Hosting

23.Google material style checkbox

See the Pen <a href='https://codepen.io/Sambego/pen/zDLxe/'>Google material style checkbox (css only)</a> by Sam (<a href='https://codepen.io/Sambego'>@Sambego</a>) on <a href='https://codepen.io/'>CodePen</a>.

Author

Made with

HTML / CSS(SCSS) / JS

demo and code Get Hosting

24.Custom CSS Checkbox

See the Pen <a href='https://codepen.io/derekmorash/pen/Eydxab/'>Custom CSS Checkbox</a> by Derek Morash (<a href='https://codepen.io/derekmorash'>@derekmorash</a>) on <a href='https://codepen.io/'>CodePen</a>.

Author

Derek Morash

Made with

HTML / CSS(Less) / JS

demo and code Get Hosting

25.Pure CSS toggle buttons

See the Pen <a href='https://codepen.io/mallendeo/pen/eLIiG/'>Pure CSS toggle buttons</a> by Mauricio Allende (<a href='https://codepen.io/mallendeo'>@mallendeo</a>) on <a href='https://codepen.io/'>CodePen</a>.

Author

Mauricio Allende

Made with

HTML(Pug) / CSS(SCSS) / JS

demo and code Get Hosting

26.SVG Checkbox

See the Pen <a href='https://codepen.io/grayghostvisuals/pen/gbEMNy/'>SVG Checkbox</a> by GRAY GHOST (<a href='https://codepen.io/grayghostvisuals'>@grayghostvisuals</a>) on <a href='https://codepen.io/'>CodePen</a>.

Author

GRAY GHOST

Made with

HTML / CSS(SCSS)

demo and code Get Hosting

27.Custom Checkbox

See the Pen <a href='https://codepen.io/mattdrose/pen/iswyE/'>Custom Checkbox</a> by mattdrose (<a href='https://codepen.io/mattdrose'>@mattdrose</a>) on <a href='https://codepen.io/'>CodePen</a>.

Author

mattdrose

Made with

HTML / CSS(SCSS)

demo and code Get Hosting

28.Fluid Checkboxes

See the Pen <a href='https://codepen.io/BjornRombaut/pen/pyLMxY/'>Fluid Checkboxes</a> by Bjorn (<a href='https://codepen.io/BjornRombaut'>@BjornRombaut</a>) on <a href='https://codepen.io/'>CodePen</a>.

Author

Bjorn

Made with

HTML(Pug) / CSS(SCSS)

demo and code Get Hosting

29.Morphing css checkbox

See the Pen <a href='https://codepen.io/sderoij/pen/VvJJwE/'>Morphing css checkbox</a> by Sjoerd de Roij (<a href='https://codepen.io/sderoij'>@sderoij</a>) on <a href='https://codepen.io/'>CodePen</a>.

Author

Sjoerd de Roij

Made with

HTML / CSS(SCSS)

demo and code Get Hosting

30.Custom checkbox with svg

See the Pen <a href='https://codepen.io/rolchau/pen/rlAtq/'>Custom checkbox with svg marker</a> by Tommy Rolchau Mathiesen (<a href='https://codepen.io/rolchau'>@rolchau</a>) on <a href='https://codepen.io/'>CodePen</a>.

Author

Tommy Rolchau Mathiesen

Made with

HTML / CSS(SCSS)

demo and code Get Hosting

31.Flat UI – Checkbox FIX

See the Pen <a href='https://codepen.io/ARS/pen/aeDHE/'>Flat UI – Checkbox FIX</a> by Arsen Zbidniakov (<a href='https://codepen.io/ARS'>@ARS</a>) on <a href='https://codepen.io/'>CodePen</a>.

Author

Arsen Zbidniakov

Made with

HTML / CSS

demo and code Get Hosting

32.Checkbox/Radio/Toggle Switches

See the Pen <a href='https://codepen.io/jcgilmore2/pen/PZpmaK/'>Variable Based Inputs – Checkbox/Radio/Toggle Switches</a> by James Gilmore (<a href='https://codepen.io/jcgilmore2'>@jcgilmore2</a>) on <a href='https://codepen.io/'>CodePen</a>.

Author

James Gilmore

Made with

HTML / CSS(SCSS) / JS

demo and code Get Hosting

33.Motion Checkbox

See the Pen <a href='https://codepen.io/JonasBadalic/pen/wKEWjG/'>Motion Checkbox</a> by Jonas Badalic (<a href='https://codepen.io/JonasBadalic'>@JonasBadalic</a>) on <a href='https://codepen.io/'>CodePen</a>.

Author

Jonas Badalic

Made with

HTML / CSS(SCSS)

demo and code Get Hosting

34.SVG Checkbox animation

See the Pen <a href='https://codepen.io/JonasBadalic/pen/bVWoWX/'>SVG Checkbox animation</a> by Jonas Badalic (<a href='https://codepen.io/JonasBadalic'>@JonasBadalic</a>) on <a href='https://codepen.io/'>CodePen</a>.

Author

Jonas Badalic

Made with

HTML / CSS(SCSS) / js

demo and code Get Hosting

35.Gooey toggle switch

See the Pen <a href='https://codepen.io/onediv/pen/pjgNqJ/'>Gooey toggle switch</a> by Vincent Durand (<a href='https://codepen.io/onediv'>@onediv</a>) on <a href='https://codepen.io/'>CodePen</a>.

Author

Vincent Durand

Made with

HTML / CSS

demo and code Get Hosting

36.Pure CSS Toggles

See the Pen <a href='https://codepen.io/rgg/pen/waEYye/'>Pure CSS Toggles</a> by Rafael González (<a href='https://codepen.io/rgg'>@rgg</a>) on <a href='https://codepen.io/'>CodePen</a>.

Author

Rafael González

Made with

HTML / CSS(SCSS)

demo and code Get Hosting

37.Custom checkbox

See the Pen <a href='https://codepen.io/valerypatorius/pen/oXGMGL/'>Custom checkbox</a> by Valery (<a href='https://codepen.io/valerypatorius'>@valerypatorius</a>) on <a href='https://codepen.io/'>CodePen</a>.

Author

Valery

Made with

HTML / CSS

demo and code Get Hosting

38.Delightful Checkbox Animation

See the Pen <a href='https://codepen.io/dylanraga/pen/Qwqbab/'>[Pure CSS] Delightful Checkbox Animation</a> by Dylan Raga (<a href='https://codepen.io/dylanraga'>@dylanraga</a>) on <a href='https://codepen.io/'>CodePen</a>.

Author

Dylan Raga

Made with

HTML / CSS

demo and code Get Hosting

39.Styling checkboxes and radio buttons

See the Pen <a href='https://codepen.io/8bitcode/pen/vEXaww/'>Styling checkboxes and radio buttons with CSS</a> by 8bit code (<a href='https://codepen.io/8bitcode'>@8bitcode</a>) on <a href='https://codepen.io/'>CodePen</a>.

Author

8bit code

Made with

HTML / CSS / JS

demo and code Get Hosting

40.Animated Checkboxes

See the Pen <a href='https://codepen.io/jaradlight/pen/IEbKq/'>Animated Checkboxes</a> by Jarad Light (<a href='https://codepen.io/jaradlight'>@jaradlight</a>) on <a href='https://codepen.io/'>CodePen</a>.

Author

Jarad Light

Made with

HTML / CSS(SCSS) / JS

demo and code Get Hosting

41.Simple styled checkbox

See the Pen <a href='https://codepen.io/cabrera/pen/mKoBa/'>Simple styled checkbox</a> by Juan Cabrera (<a href='https://codepen.io/cabrera'>@cabrera</a>) on <a href='https://codepen.io/'>CodePen</a>.

Author

Juan Cabrera

Made with

HTML(Slim) / CSS(SCSS)

demo and code Get Hosting

42.Custom Checkbox

See the Pen <a href='https://codepen.io/AndreCortellini/pen/yhrlJ/'>Custom Checkbox</a> by André Cortellini (<a href='https://codepen.io/AndreCortellini'>@AndreCortellini</a>) on <a href='https://codepen.io/'>CodePen</a>.

Author

André Cortellini

Made with

HTML / CSS

demo and code Get Hosting

43.Checkbox

See the Pen <a href='https://codepen.io/KevinChassagne/pen/DAqro/'>Checkbox</a> by Kévin Chassagne (<a href='https://codepen.io/KevinChassagne'>@KevinChassagne</a>) on <a href='https://codepen.io/'>CodePen</a>.

Author

Kévin Chassagne

Made with

HTML / CSS

demo and code Get Hosting

44.Semantic CSS Animated Checkboxes

See the Pen <a href='https://codepen.io/dganoff/pen/GAcHv/'>Semantic CSS Animated Checkboxes</a> by Demetri Ganoff (<a href='https://codepen.io/dganoff'>@dganoff</a>) on <a href='https://codepen.io/'>CodePen</a>.

Author

Demetri Ganoff

Made with

HTML / CSS(SCSS)

demo and code Get Hosting

45.CSS-only animated checkbox

See the Pen <a href='https://codepen.io/timseverien/pen/Fkfhi/'>CSS-only animated checkbox</a> by Tim Severien (<a href='https://codepen.io/timseverien'>@timseverien</a>) on <a href='https://codepen.io/'>CodePen</a>.

Author

Tim Severien

Made with

HTML / CSS(SCSS)

demo and code Get Hosting

46.Custom CSS Checkbox

See the Pen <a href='https://codepen.io/wallaceerick/pen/Czqso/'>Custom CSS Checkbox</a> by Wallace Erick (<a href='https://codepen.io/wallaceerick'>@wallaceerick</a>) on <a href='https://codepen.io/'>CodePen</a>.

Author

Wallace Erick

Made with

HTML / CSS(SCSS) / JS

demo and code Get Hosting

47.Flat Toggle Switch

See the Pen <a href='https://codepen.io/dervondenbergen/pen/BjJbx/'>Flat Toggle Switch</a> by Felix De Montis (<a href='https://codepen.io/dervondenbergen'>@dervondenbergen</a>) on <a href='https://codepen.io/'>CodePen</a>.

Author

Felix De Montis

Made with

HTML(Haml) / CSS

demo and code Get Hosting

48.Checkbox css

See the Pen <a href='https://codepen.io/pixelslip/pen/fyqir/'>Checkbox css</a> by pixelslip (<a href='https://codepen.io/pixelslip'>@pixelslip</a>) on <a href='https://codepen.io/'>CodePen</a>.