A couple of pure CSS switches with a nice clean design and a monochromatic color palette. The switches do not use Javascript for the toggle action ...

A couple of pure CSS switches with a nice clean design and a monochromatic color palette. The switches do not use Javascript for the toggle action and instead, they make use of the checkboxes-label approach that only uses CSS for styling a setting the switches. Created by CodePen user Zed Dash.

A set of 4 menu transitions created solely using CSS to do a menu "hamburger" transition using checkbox properties. Created by CodePen user Nathan ...

A set of 4 menu transitions created solely using CSS to do a menu "hamburger" transition using checkbox properties. Created by CodePen user Nathan Schmidt.

A checklist web element with a progress bar created using pure CSS. The element is collapsible and each time you unfold it, it showcases an upper s...

A checklist web element with a progress bar created using pure CSS. The element is collapsible and each time you unfold it, it showcases an upper satisfying stepped animation. The element is structured using Haml HTML, styled and animated with Sass CSS. Created by CodePen user Miguel.

This is a neat and fluid toggle animation on a checkbox. The animation path is controlled by JavaScript styled in CSS with the use of HTML to use s...

This is a neat and fluid toggle animation on a checkbox. The animation path is controlled by JavaScript styled in CSS with the use of HTML to use several SVG lines. Created by Codepen user Timothee Guignard.

Neat CSS tasklist by Codepen user Shaw adapted from original JS code by dribbble user Gal Shir. It features neat animations for three checkboxes in...

Neat CSS tasklist by Codepen user Shaw adapted from original JS code by dribbble user Gal Shir. It features neat animations for three checkboxes included in the snippet.

Pretty CheckBox is a pure CSS library to create beautiful radio buttons and checkboxes with a variety of effects and transitions. You can use Font ...

Pretty CheckBox is a pure CSS library to create beautiful radio buttons and checkboxes with a variety of effects and transitions. You can use Font Icons to replace basic checkbox styles, add different button/box shapes, animations like fade in/out, jelly, rotation, pulse, and more!   

Nifty CSS3 Checkbox Styles created by codepen user Brad Bodine, functional and stylish, with a short and lightweight code for easy implementation.

Nifty CSS3 Checkbox Styles created by codepen user Brad Bodine, functional and stylish, with a short and lightweight code for easy implementation.

A set of clean CSS Checkboxes covering: Unchecked, Checked, Disabled and Enabled states with a nice self-explanatory UX

A set of clean CSS Checkboxes covering: Unchecked, Checked, Disabled and Enabled states with a nice self-explanatory UX

A gorgeous animation made in pure CSS for animating checkboxes. Once a checkbox is clicked, it gets illuminated and a check mark appears, and also ...

A gorgeous animation made in pure CSS for animating checkboxes. Once a checkbox is clicked, it gets illuminated and a check mark appears, and also the text changes its color to let the user know it is selected. This snippet was created by Dylan Raga.

A great tutorial that shows how to take advantage of SVG paths animated with JavaScript to create good looking checkboxes and radio buttons by usin...

A great tutorial that shows how to take advantage of SVG paths animated with JavaScript to create good looking checkboxes and radio buttons by using pseudo-elements. In the examples shown, the options highlight when clicked and animated lines mark the boxes, providing a fantastic look and feel.

Brad Bodine  has designed a set of checkboxes with a metalic green-grey style that reminds us a nuclear power ...

Brad Bodine  has designed a set of checkboxes with a metalic green-grey style that reminds us a nuclear power plant. Browser support: ✓ Chrome 25.0 ✓ FireFox 19.0.2 ✓ Safari 5.1.7 ✓ IE 10

Hi ! this is a part of a set i prepare about a Smooth UI Kit, so here i post some of radio's and checkboxes Iv...

Hi ! this is a part of a set i prepare about a Smooth UI Kit, so here i post some of radio's and checkboxes Iv'e recently create. Uses mostly the attribute :ckecked, this set is really simple to understand and modify. Using box-shadows, gradient backgrounds and border-radiu, this set is really clear and easy. Uploaded by Web-Gate // Luky_vj  from cssdeck.com Browser support: ✓ Chrome 25.0 ✓ FireFox 19.0.2 X Safari 5.1.7 X IE 10

Round switch button in CSS with animation cleaned up.

Round switch button in CSS with animation cleaned up.

Taufik Nurrohman  has designed this dark metalic checkbox concept using css3 peoperties and pseudoelements. It...

Taufik Nurrohman  has designed this dark metalic checkbox concept using css3 peoperties and pseudoelements. It's absolutely cross browser. Browser support: ✓ Chrome 25.0 ✓ FireFox 19.0.2 ✓ Safari 5.1.7 ✓ IE 10

These are some stylish CSS only switch buttons, made based on this Adobe Illustrator tutorial, a simplified version of course.

These are some stylish CSS only switch buttons, made based on this Adobe Illustrator tutorial, a simplified version of course.

Taufik Nurrohman this time a collection of 3 white switch buttons using the css gradient, box shadow and data ...

Taufik Nurrohman this time a collection of 3 white switch buttons using the css gradient, box shadow and data pseudo classes and properties. The symbols look better in no webkit browsers. Browser support: ✓ Chrome 25.0 ✓ FireFox 19.0.2 ✓ Safari 5.1.7 ✓ IE 1

This code experiment is a set of elements with an interesting style: one range slider (or just a slider) and two switches. Although this only works...

This code experiment is a set of elements with an interesting style: one range slider (or just a slider) and two switches. Although this only works in Webkit, it is a small example of how powerful CSS can be. Transitioning the pseudo-element on the checkboxes was tricky, but not impossible. Most importantly, no additional elements were used. Use them on your next projects, as a website or a mobile app.

We introduce a basic but not less visual attractive checkbox switch button shared by Victor knust in www.codepen.io. This author has made a good jo...

We introduce a basic but not less visual attractive checkbox switch button shared by Victor knust in www.codepen.io. This author has made a good job creating beautiful set of minimalistic, white and bordered checkboxes, but this is not as succesfull because it's not made just in css. However, we can use this if we have the jQuery lib in our site. The author has made a complete documentation as well, so you can implement it in your website easily and quickly....

Inpired by Delacro's beautiful Dribbble shot with a lovely style.

Inpired by Delacro's beautiful Dribbble shot with a lovely style.

Collection of some fresh, flat toggles. All utilize the "checkbox" hack.

Collection of some fresh, flat toggles. All utilize the "checkbox" hack.

A set of fully functional toggle switches in multiple colors. Useful for ...

A set of fully functional toggle switches in multiple colors. Useful for switching views and toggling settings.

A classic flat button made with CSS and JS using the family font, open sans, and sans-serif as the second option. The button has round corners. A d...

A classic flat button made with CSS and JS using the family font, open sans, and sans-serif as the second option. The button has round corners. A design made by user St. Johann in Codepen.io

Fancy switch created by Dmitri Voronianski.

Fancy switch created by Dmitri Voronianski.

A nice tutorial by TutorialZine's Martin Angelov that will show you how to enhance the default look of your checkboxes thanks to a neat jQuery Plug...

A nice tutorial by TutorialZine's Martin Angelov that will show you how to enhance the default look of your checkboxes thanks to a neat jQuery Plugin. In case JavaScript is not enabled, the checkboxes will automatically go back to the default appearance.

Checkboxes created to look and behave like Android's new Holo UI.Pseudo checkbox created using data roles, with a "border triangle" added as required.

Checkboxes created to look and behave like Android's new Holo UI.Pseudo checkbox created using data roles, with a "border triangle" added as required.

Realistic switch with red and blue background.

Realistic switch with red and blue background.

Checkbox concept put together by Denys Mishunov. mishunov.me

Checkbox concept put together by Denys Mishunov. mishunov.me

Please log in to comment.Like, at all. Sorry. If you enable it and reload this page you'll be good to go. Need...

Please log in to comment.Like, at all. Sorry. If you enable it and reload this page you'll be good to go. Need to know how? Go here.

Heavily inspired by http://dribbble.com/shots/969876-Switch-gif, maybe someday I will add the switch as wellNo...

Heavily inspired by http://dribbble.com/shots/969876-Switch-gif, maybe someday I will add the switch as wellNo love yet for this pen.Please log in to comment.Like, at all. Sorry. If you enable it and reload this page you'll be good to go. Need to know how? Go here.

A few different checkbox stylesNo love yet for this pen.Please log in to comment.Like, at all. Sorry. If you e...

A few different checkbox stylesNo love yet for this pen.Please log in to comment.Like, at all. Sorry. If you enable it and reload this page you'll be good to go. Need to know how? Go here.

Minimalist styled form elements like checkbox, radio, select, dropdown.

Minimalist styled form elements like checkbox, radio, select, dropdown.

An iOS style Tick Checkbox like those seen in the Mail app when you edit the list. No images, and degrades grac...

An iOS style Tick Checkbox like those seen in the Mail app when you edit the list. No images, and degrades gracefully back to a regular checkbox.Please log in to comment.Like, at all. Sorry. If you enable it and reload this page you'll be good to go. Need to know how? Go here.

Nicely squishy rubber (elastomer) buttons, inspired by designs on Dribbble. This design was made by the user Justin Windle in Codepen.io

Nicely squishy rubber (elastomer) buttons, inspired by designs on Dribbble. This design was made by the user Justin Windle in Codepen.io

A set of round buttons showcasing a checkbox with a depth effect, every time that they are selected, featuring three different colors. A design mad...

A set of round buttons showcasing a checkbox with a depth effect, every time that they are selected, featuring three different colors. A design made by user Vladimir Varbanov in Codepen.io

Beautiful round buttons showcasing a checkbox with a depth effect, every time that they are selected. A design made by user katmai7 in Codepen.io

Beautiful round buttons showcasing a checkbox with a depth effect, every time that they are selected. A design made by user katmai7 in Codepen.io

It uses some gradient color stops to make the label element to appear split in two. Using CSS pseudo-element to insert that symbols through the dat...

It uses some gradient color stops to make the label element to appear split in two. Using CSS pseudo-element to insert that symbols through the data-on and data-off attribute, so the symbols can be determined with more flexible. The three-dimensional effect created by the inset box-shadow.

A board with a design out of the box. The point was to do it in a clever way (no absolute positioning, no HTML ID/classes, no specific markup or CS...

A board with a design out of the box. The point was to do it in a clever way (no absolute positioning, no HTML ID/classes, no specific markup or CSS). Success thanks to CSS counters and float tricks.

Here we have a set of checkboxes and radio buttons with a dark background and blue elements. The checkboxes and radio buttons have a minimal style ...

Here we have a set of checkboxes and radio buttons with a dark background and blue elements. The checkboxes and radio buttons have a minimal style complemented with beautiful glowing marks and subtle shadows. It is created using CSS and HTML.

Inspired by Mike Ackerman's work on Dribbble; except for the right shadow on the initial state, it was pretty easy to do. I even felt confident eno...

Inspired by Mike Ackerman's work on Dribbble; except for the right shadow on the initial state, it was pretty easy to do. I even felt confident enough to change some shadows from the original work.

A pair of checkboxes toggles, flat design, round corners and using soft colors. This design was made in pure CSS by user Jesper Hills in Codepen.io

A pair of checkboxes toggles, flat design, round corners and using soft colors. This design was made in pure CSS by user Jesper Hills in Codepen.io

Clean switches, round corners, that change in size and color as they are selected. A design made by user Kasper Mikiewicz in Codepen.io

Clean switches, round corners, that change in size and color as they are selected. A design made by user Kasper Mikiewicz in Codepen.io

Inspired by Nina's work on Dribbble. Incredibly soft design. In fact, I don't think I ever had to manage such delicate (and therefore complicated) ...

Inspired by Nina's work on Dribbble. Incredibly soft design. In fact, I don't think I ever had to manage such delicate (and therefore complicated) shadows.

A beautiful user interface concept including amazing buttons with well-designed states. It is also possible to add text boxes into the mix. The act...

A beautiful user interface concept including amazing buttons with well-designed states. It is also possible to add text boxes into the mix. The active state of the buttons (which can have toggle functionality) is very attractive, featuring a neon-like effect. Uploaded to CodePen by Lopez Hugo.