Post thumbnail: 21 CSS Toggle Switches

21 CSS Toggle Switches

Collection of hand-picked free HTML and CSS toggle switch code examples.

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