Collection of hand-picked free HTML and CSS toggle switch code examples. Update of July 2018 collection. 13 new items.

34 CSS Toggle Switches

Collection of hand-picked free HTML and CSS toggle switch code examples. Update of July 2018 collection. 13 new items.

Related Articles

  1. CSS Checkboxes
  2. CSS Radio Buttons

Author

  • @keyframers

Made with

  • HTML / CSS (SCSS)

About the code

Checkbox Toggle Animation

Pure CSS checkbox toggle animation.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Florin Pop

Made with

  • HTML / CSS

About the code

Toggle Radial Effect

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • Liam

Made with

  • HTML / CSS (SCSS)

About the code

CSS Grid Toggle

A new take on the CSS toggle, using CSS grid animations.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • Daryn St. Pierre

Made with

  • HTML (Pug) / CSS (SCSS)

About the code

Simple Knobby Toggles

HTML & CSS simple knobby toggles.

Compatible browsers: Chrome, Firefox (partial), Opera, Safari

Responsive: no

Dependencies: -

Author

  • Chintu Yadav Sara

Made with

  • HTML / CSS

About the code

Gender Toggle Pure CSS

Compatible browsers: Chrome, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Marcus Connor

Made with

  • HTML / CSS

About the code

Checkbox Rocker Toggle Switch

An HTML checkbox form element styled as a rocker toggle switch.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • Grzegorz Witczak

Made with

  • HTML / CSS (Stylus)

About the code

Pure CSS Bulb Switch

Pure HTML and CSS light bulb toggle switch.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • Aaron Iker

Made with

  • HTML / CSS (SCSS)

About the code

Switch Animation

Switch animation in HTML and CSS.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • Aaron Iker

Made with

  • HTML / CSS (SCSS)

About the code

Lock Switch Animation

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • Stockin

Made with

  • HTML / CSS

About the code

Toggle Buttons

More exciting than a boring checkbox.

Compatible browsers: Chrome, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • Himalaya Singh

Made with

  • HTML / CSS

About the code

Pure CSS Toggle Buttons | ON-OFF Switches

Collection of toggle buttons / on-off switches which can be practically used in a website. Designed using CSS without any JavaScript.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • Zed Dash

Made with

  • HTML / CSS (SCSS)

About the code

Switches (Checkboxes)

HTML and CSS toggle switches.

Compatible browsers: Chrome, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • Adam Kuhn

Made with

  • HTML (Haml) / CSS (SCSS)

About the code

Wobble Toggle

Pure CSS wobble toggle switch.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Demo image: Totoro Toggle Demo image: Totoro Toggle

Author

  • Adam Kuhn

Made with

  • HTML (Haml) / CSS (SCSS)

About the code

Totoro Toggle

Very nice and simple Totoro toggle switch.

Compatible browsers: Chrome, IE, Edge, Firefox, Opera, Safari

Dependencies: -

Demo image: Toggle Demo image: Toggle

Author

  • Andreas Storm

Made with

  • HTML / CSS (Stylus)

About the code

Toggle

Pure CSS animated toggle switch.

Compatible browsers: Chrome, IE, Edge, Firefox, Opera, Safari

Dependencies: -

Demo image: Cold-Hot Toggle Switch Demo image: Cold-Hot Toggle Switch

Author

  • Jon Kantner

Made with

  • HTML / CSS

About the code

Cold-Hot Toggle Switch

Probably a toggle switch concept that no one has tried before. This one is for temperature—options being cold or hot. The idea is to portray the handle as an ice cube for cold and a flame for hot. For hot, the cube moves right and melts at the same time, and a rising flame moves along with it. For cold again, the water forms back into a cube while moving left, and the flame dies while moving with it.

Compatible browsers: Chrome, Firefox, Opera, Safari

Dependencies: -

Demo image: CSS Bear Toggle Demo image: CSS Bear Toggle

Author

  • Anastasia Goodwin

Made with

  • HTML / CSS (SCSS)

About the code

CSS Bear Toggle

A beary cute toggle.

Compatible browsers: Chrome, IE, Edge, Firefox, Opera, Safari

Dependencies: Normalize.css

Demo image: Pure CSS Elastic Toggle Demo image: Pure CSS Elastic Toggle

Author

  • halvve

Made with

  • HTML / CSS (PostCSS)

About the code

Elastic Toggle

Pure CSS elastic toggle.

Compatible browsers: Chrome, IE, Edge, Firefox, Opera, Safari

Dependencies: Google Fonts

Demo image: Sub/Sup Toggle Demo image: Sub/Sup Toggle

Author

  • Adam Kuhn

Made with

  • HTML / CSS (SCSS)

About the code

Sub/Sup Toggle

Sub and sup toggle switch.

Compatible browsers: Chrome, IE, Edge, Firefox, Opera, Safari

Dependencies: -

Demo image: Toggle Demo image: Toggle

Author

  • Katherine Kato

Made with

  • HTML / CSS (SCSS)

About the code

Toggle

Toggle switch pure CSS.

Compatible browsers: Chrome, IE, Edge, Firefox, Opera, Safari

Dependencies: -

Demo image: Realistic Toggle Button Demo image: Realistic Toggle Button

Author

  • Alex

Made with

  • HTML (Pug) / CSS (SCSS) / JavaScript

About the code

Realistic Toggle Button

HTML and CSS realistic toggle button with little JavaScript.

Compatible browsers: Chrome, Firefox, Opera, Safari

Dependencies: -

Demo image: Implementation of Liquid button Demo image: Implementation of Liquid button

Author

  • Alex

Made with

  • HTML (Pug) / CSS (SCSS) / JavaScript

About the code

Implementation of Liquid button

Transitioning between On and Off states.

Compatible browsers: Chrome, Firefox, Opera, Safari

Dependencies: -

Demo image: Another Toggle Demo image: Another Toggle

Author

  • MacKenzie Bobbitt

Made with

  • HTML / CSS

About the code

Another Toggle

Cool HTML and CSS toggle switch.

Compatible browsers: Chrome, IE, Edge, Firefox, Opera, Safari

Dependencies: Google Fonts

Demo image: Pure CSS Day And Night Toggle Demo image: Pure CSS Day And Night Toggle

Author

  • Benjamin Réthoré

Made with

  • HTML / CSS (SCSS)

About the code

Pure CSS Day And Night Toggle

Awesome HTML and CSS day and night toggle switch.

Compatible browsers: Chrome, IE, Edge, Firefox, Opera, Safari

Dependencies: Google Fonts

Demo image: Simple Toggle Demo image: Simple Toggle

Author

  • magnificode

Made with

  • HTML / CSS (SCSS)

About the code

Simple Toggle

Simple toggle button.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -

Demo image: Flat Toggle Switch Demo image: Flat Toggle Switch

Author

  • Felix De Montis

Made with

  • HTML (Haml) / CSS

About the code

Flat Toggle Switch

Pure CSS flat toggle switch.

Compatible browsers: Chrome, IE, Edge, Firefox, Opera, Safari

Dependencies: -

Demo image: Kitty Toggle Demo image: Kitty Toggle

Author

  • Natalya

Made with

  • HTML / CSS (SCSS)

About the code

Kitty Toggle

A simple checkbox toggle improved by being made into a cat.

Compatible browsers: Chrome, IE, Edge, Firefox, Opera, Safari

Dependencies: -

Demo image: Pure CSS Toggles Demo image: Pure CSS Toggles

Author

  • Rafael González

Made with

  • HTML / CSS (SCSS)

About the code

Pure CSS Toggles

Pure CSS toggles: flat look, 3D look.

Compatible browsers: Chrome, IE, Edge, Firefox, Opera, Safari

Dependencies: -

Demo image: SVG Switches - Design Demo image: SVG Switches - Design

Author

  • MaxStalker

Made with

  • HTML / CSS

About the code

SVG Switches - Design

HTML/CSS switches design with SVG.

Compatible browsers: Chrome, Firefox, Opera, Safari

Dependencies: -

Demo image: Skew Switch Demo image: Skew Switch

Author

  • Abhijit Hota

Made with

  • HTML (Haml) / CSS (SCSS) / JavaScript

About the code

Skew Switch

Nice skew switch.

Compatible browsers: Chrome (partial), IE (partial), Edge (partial), Firefox, Opera (partial), Safari (partial)

Dependencies: jQuery

Demo image: CSS Switch Demo image: CSS Switch

Author

  • Randy Lebeau

Made with

  • HTML / CSS / JavaScript

About the code

CSS Switch

Toggle switch with CSS animation.

Compatible browsers: Chrome, IE, Edge, Firefox, Opera, Safari

Dependencies: jQuery

Demo image: iOS 7 Toggle Demo image: iOS 7 Toggle

Author

  • Daniel Eden

Made with

  • HTML / CSS

About the code

iOS 7 Toggle

CSS/HTML only recreation of the iOS 7 toggle buttons.

Compatible browsers: Chrome, IE, Edge, Firefox, Opera, Safari

Dependencies: Modernizr.js

Demo image: Switches Demo image: Switches

Author

  • Billy Crist

Made with

  • HTML / CSS (SCSS)

About the code

Switches

The first 2 are designed with depth and lighting, while the 3rd one is flatly designed with a somewhat "gooey"-ish transition on it.

Compatible browsers: Chrome, IE, Edge, Firefox, Opera, Safari

Dependencies: -

back to top