Collection of hand-picked free HTML and CSS toggle switch code examples. Update of June 2019 collection. 25 new items.

59 CSS Toggle Switches

Collection of hand-picked free HTML and CSS toggle switch code examples. Update of June 2019 collection. 25 new items.

Related Articles

  1. CSS Checkboxes
  2. CSS Radio Buttons
  3. jQuery Toggle Switches

Author

  • Aaron Iker

Made with

  • HTML / CSS (SCSS)

About a code

CSS Neumorphism Toggle

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

Responsive: no

Dependencies: -

Author

  • Aaron Iker

Made with

  • HTML / CSS (SCSS)

About a code

CSS Egg Switch

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

Responsive: no

Dependencies: -

Author

  • halvves

Made with

  • HTML / CSS

About a code

Neumorphic Toggle

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

Responsive: no

Dependencies: -

Author

  • Ömercan Balandı

Made with

  • HTML / CSS (Sass)

About a code

Pure CSS Fuel Gauge Toggle

E 1/2 F pure CSS fuel gauge toggle click on the gauge to toggle the indicator.

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

Responsive: no

Dependencies: -

Author

  • Olivia Ng

Made with

  • HTML (Pug) / CSS (SCSS)

About a code

Toggles

Do you want your toggle fancy or functional?

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

Responsive: no

Dependencies: -

Author

  • Andreas Storm

Made with

  • HTML / CSS (Sass)

About a code

Toggle

Toggle / checkbox without label.

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

Responsive: no

Dependencies: -

Author

  • Milan Raring

Made with

  • HTML / CSS (SCSS)

About a code

Power switch animation

Simple power switch animation.

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

Responsive: no

Dependencies: -

Author

  • Aaron Iker

Made with

  • HTML / CSS (SCSS)

About a code

CSS Plane Switch

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

Responsive: no

Dependencies: -

Author

  • Aaron Iker

Made with

  • HTML / CSS (SCSS)

About a code

CSS Heart Switch

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

Responsive: no

Dependencies: -

Author

  • CodeMeNatalie

Made with

  • HTML / CSS (SCSS)

About a code

Toggle Switch Checkbox

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

Responsive: yes

Dependencies: -

Author

  • Himalaya Singh

Made with

  • HTML / CSS

About a code

Subscribe Toggle Button

A subscribe toggle button featuring "Smudge, The Confused Cat" From Famous "Woman Yelling At Cat" meme.

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

Responsive: no

Dependencies: -

Author

  • CodeMeNatalie

Made with

  • HTML / CSS (SCSS)

About a code

Square to Circle Toggle

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

Responsive: no

Dependencies: -

Author

  • Aaron Iker

Made with

  • HTML / CSS (SCSS)

About a code

Volume Toggle CSS Switch

Sound on/off transition.

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

Responsive: no

Dependencies: -

Author

  • Aaron Iker

Made with

  • HTML / CSS (SCSS)

About a code

Simple CSS Switch / Toggle

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

Responsive: no

Dependencies: -

Author

  • Aaron Iker

Made with

  • HTML / CSS

About a code

Simple CSS Switch / Toggle

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

Responsive: no

Dependencies: -

Author

  • Daryn St. Pierre

Made with

  • HTML / CSS (SCSS)

About a code

Antsy Toggles

Toggles that have a bit of anxiety...

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

Responsive: no

Dependencies: -

Author

  • Ahmad Emran

Made with

  • HTML / CSS

About a code

Checkbox CSS Toggle - Day / Night Mode

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

Responsive: no

Dependencies: -

Author

  • Garet McKinley

Made with

  • HTML / CSS (SCSS)

About a code

Animated CSS Toggle Switch

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

Responsive: no

Dependencies: -

Author

  • Jon Kantner

Made with

  • HTML / CSS

About a code

Toy Toggle Switch

What a toggle switch may look like if on a Little Tikes product, considering the plastic look. The handle is to resemble a dual colored ball.

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

Responsive: no

Dependencies: -

Author

  • Erdem Uslu

Made with

  • HTML (Pug) / CSS (SCSS)

About a code

Checkbox Animation with Pure CSS

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

Responsive: no

Dependencies: -

Author

  • Ana Tudor

Made with

  • HTML / CSS (SCSS)

About a code

Day/Night Toggle

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

Responsive: no

Dependencies: -

Author

  • Himalaya Singh

Made with

  • HTML / CSS

About a code

A Confusing Toggle Button

A confusing toggle button / toggle switch Using HTML and CSS.

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

Responsive: no

Dependencies: -

Author

  • Mark

Made with

  • HTML (Pug) / CSS (SCSS)

About a code

An Actual Pure CSS Checkbox Slider

Lots people use JS for the text changes but you don't need to.

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

Responsive: no

Dependencies: -

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: -

Author

  • Himalaya Singh

Made with

  • HTML / CSS

About a code

Toggle Buttons / On-Off Switches

Day night toggle button, elastic toggle button or on-off switches.

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

Author

  • Rau

Made with

  • HTML / CSS (SCSS)

About a code

Pure CSS Minimal Toggle

Toggle with just CSS.

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

Responsive: no

Dependencies: -

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