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

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

smooth_ui_radiocheckboxes_kit

More Details

CSS UI Elements with Red and Blue Gradients

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

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

squishy_toggle_buttons

Nicely squishy rubber buttons, inspired by designs on dribbble.

More Details

Pure CSS Checkboxes & Radio Buttons

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

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

css_yesno_button_switch

More Details

Sinograph Panel: CSS UI Concept

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

simple_animated_switch

Fancy switch created by dmitri voronianski.

More Details

jquery checkbox style

jquery_checkbox_style

More Details

CSS3 Checkbox Styles

css3_checkbox_styles

More Details

Amazing Stylish CSS Switch Buttons

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

fancy_checkbox_toggles

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

More Details

Input Range styled

input_range_styled

More Details

Flat Recommend Button

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

pure_css_light_switch

More Details

Checkbox Toggle Animation CSS

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

android_holo_style_checkboxes

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

More Details

Flat Toggles With Animation

flat_toggles_with_animation

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

More Details

CSS Only iOS Style Checkbox Tick

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

pure_css3_toggle_button_white_theme

More Details

Pure CSS Animated Checkbox

pure_css_animated_checkbox

Realistic switch with red and blue background.

More Details

CSS Checkbox Styles

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

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

flat_yesno_switch

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

More Details

Blue Checkbox Button

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

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

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

simple_checkbox_button

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

More Details

Checklist with Progress Bar CSS/HTML Template

checklist_with_progress_bar_csshtml_template

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

More Details

Colorful Toggle Switches

colorful_toggle_switches

A set of fully functional toggle switches in multiple colors.

More Details

Styled Form Fields

styled_form_fields

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

More Details

Pure CSS3 Metal Checkbox

pure_css3_metal_checkbox

More Details

Better Check Boxes with jQuery and CSS

better_check_boxes_with_jquery_and_css

More Details

CSS Elevator Board

css_elevator_board

A board with a design out of the box.

More Details

Checkbox light

checkbox_light

More Details

Pure CSS Checkbox Animation

pure_css_checkbox_animation

A gorgeous animation made in pure css for animating checkboxes.

More Details

Fancy Sheckbox Selector

fancy_sheckbox_selector

Checkbox concept put together by denys mishunov.

More Details

Pure CSS Menu Transitions

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

toggle_switch_with_checkboxchecked

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 *