40+ Free HTML/CSS Switch & Checkboxes Snippets

Here we’ve gathered some of beautiful  HTML/CSS switch, radio and checkboxes snippets that you can use for your next project. This list is also great for web designer to learn new code snippets and web design inspiration.

See Also: 15 CSS Calendar Snippet

Simple And Minimalistic CSS Switch Button


A basic but not less visual attractive checkbox with minimalistic, white and bordered checkboxes.

More Details

Smooth UI Radio-Checkboxes KIT


More Details

CSS UI Elements with Red and Blue Gradients


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

More Details

Animated SVG Checkboxes & Radio Buttons jQuery Plugin


A great tutorial that shows how to take advantage of svg paths animated with javascript to create good looking checkboxes and radio buttons.

More Details

Squishy Toggle Buttons


Nicely squishy rubber buttons, inspired by designs on dribbble.

More Details

Pure CSS Checkboxes & Radio Buttons


Pretty checkbox is a pure css library to create beautiful radio buttons and checkboxes with a variety of effects and transitions.

More Details

CSS Task Checklist


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.

More Details

CSS Yes/No Button Switch


More Details

Sinograph Panel: CSS UI Concept


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 is very attractive, featuring a neon-like effect.

More Details

Simple Animated Switch


Fancy switch created by dmitri voronianski.

More Details

jquery checkbox style


More Details

CSS3 Checkbox Styles


More Details

Amazing Stylish CSS Switch Buttons


These are some stylish css only switch buttons, made based on this adobe illustrator tutorial, a simplified version.

More Details

Fancy Checkbox Toggles


A pair of checkboxes toggles, flat design, round corners and using soft colors.

More Details

Input Range styled


More Details

Flat Recommend Button


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.

More Details

Pure CSS Light Switch


More Details

Checkbox Toggle Animation CSS


This is a neat and fluid toggle animation on a checkbox controlled by javascript styled in css with the use of html to use several svg lines.

More Details

Android Holo Style Checkboxes


Checkboxes created to look and behave like androids new holo ui.

More Details

Flat Toggles With Animation


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

More Details

CSS Only iOS Style Checkbox Tick


An ios style tick checkbox like those seen in the mail app when you edit the list.

More Details

Pure CSS3 Toggle Button White Theme


More Details

Pure CSS Animated Checkbox


Realistic switch with red and blue background.

More Details

CSS Checkbox Styles


Nifty css3 checkbox styles created by codepen user brad bodine, functional and stylish, with a short and lightweight code for easy implementation.

More Details

Acid Checkbox Style


Brad bodine has designed a set of checkboxes with a metallic green-grey style that reminds us a nuclear power plant.

More Details

Flat Yes-No Switch


Clean switches, round corners, that change in size and color as they are selected.

More Details

Blue Checkbox Button


Beautiful round buttons showcasing a checkbox with a depth effect, every time that they are selected.

More Details

CSS Checkboxes with visual affordance Indicators


A set of clean css checkboxes covering: unchecked, checked, disabled and enabled states.

More Details

Dark Checkboxes and Radio Buttons in CSS


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.

More Details

Simple Checkbox Button


A set of round buttons showcasing a checkbox with a depth effect.

More Details

Checklist with Progress Bar CSS/HTML Template


A checklist web element with a progress bar created using pure css.

More Details

Colorful Toggle Switches


A set of fully functional toggle switches in multiple colors.

More Details

Styled Form Fields


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

More Details

Pure CSS3 Metal Checkbox


More Details

Better Check Boxes with jQuery and CSS


More Details

CSS Elevator Board


A board with a design out of the box.

More Details

Checkbox light


More Details

Pure CSS Checkbox Animation


A gorgeous animation made in pure css for animating checkboxes.

More Details

Fancy Sheckbox Selector


Checkbox concept put together by denys mishunov.

More Details

Pure CSS Menu Transitions


A set of 4 menu transitions created solely using css to do a menu hamburger transition using checkbox properties.

More Details

Toggle Switch With checkbox:checked


Round switch button in css with animation cleaned up.

More Details

Leave a Reply

Your email address will not be published. Required fields are marked *

japanese sexfoxporn