89 Best CSS Toggle Switches

This is a collection of CSS toggle switches. The demos include both HTML and CSS, along with the required JavaScript. This collection is perfect for anybody who wants to create their own toggle switch without having to tinker around with some code. Updated with 17 items on Oct 21, 2021.

Author

  • Jon Kantner
  • June 8, 2018

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.

Update 6/9/18: made water in the checked state a bit more noticeable

More info: Link

Dependency:


Author

  • Jon Kantner
  • August 10, 2018

Made with

  • HTML / SCSS

About the Code

Tire Toggle

A toggle switch concept where a flaming wheel indicates On and without the flame to mean Off. Updated May 20, 2020

More info: Link

Dependency:


Author

  • Jon Kantner
  • July 2, 2019

Made with

  • HTML / CSS

About the 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. Update 8/28/19: Changed divs to spans.

More info: Link

Dependency:


Author

  • Jon Kantner
  • August 1, 2019

Made with

  • HTML / CSS / JS

About the Code

Paper Clip Toggle Switch

A kind of switch where a marble rides between the sides of a paper clip.

More info: Link

Dependency:


Author

  • Jon Kantner
  • November 26, 2019

Made with

  • HTML / CSS / JS

About the Code

Toggle Switch with Rolling Label

A switch where the control is used as an O, then the other letters roll up or down like slots in a slot machine. At the same time, a wipe effect is applied to make the background match the switch state.

More info: Link

Dependency:


Author

  • Jon Kantner
  • May 21, 2018

Made with

  • HTML / CSS / JS

About the Code

Skeuomorphic Lever Checkbox

An interactive CSS version of this GIF of a skeuomorphic lever from MagniGeeks. No IE support.

More info: Link

Dependency:


Author

  • Jon Kantner
  • September 5, 2019

Made with

  • HTML / CSS

About the Code

Tiny Toggle Switch

A realistic toggle switch is drawn to look its best when really small

More info: Link

Dependency:


Author

  • Jon Kantner
  • October 1, 2020

Made with

  • HTML / CSS / JS

About the Code

Toggle Switch with a Hole Handle

Rather than a cylinder for a handle, this switch has a moving hole.

More info: Link

Dependency:


Author

  • Jon Kantner
  • October 29, 2020

Made with

  • HTML / Sass / JS

About the Code

Pill Switch

A toggle switch designed to look like medicine. During toggle, the handle stretches to reveal both the red and green sides.

More info: Link

Dependency:


Author

  • Jon Kantner
  • October 23, 2020

Made with

  • HTML / CSS

About the Code

Toggle Bubble

A toggle button is drawn as a bubble containing a donut that turns to resemble a 0 or 1.

More info: Link

Dependency:


Author

  • Jhey
  • August 18, 2020

Made with

  • Pug / Stylus / JS

About the Code

Impossible Checkbox v2

Revisiting one of my favorite pens to update the React side of it and add sound.

More info: Link

Dependency: react.production.min.js, react-dom.production.min.js, gsap.min.js


Author

  • Yoav Kadosh
  • March 9, 2021

Made with

  • Pug / SCSS

About the Code

Realistic Red Switch (Pure CSS)

Yoav Kadosh uses “gradients, 3D transformations, animations and transitions” to craft this awesome recreation of Voicu Apostol’s “3D Red Switch” from Dribbble. This is my attempt at making a realistic switch using CSS only. I’m using multiple CSS techniques here, including gradients, 3D transformations, animations, and transitions.

More info: Link

Dependency:


Author

  • Kristopher Van Sant
  • March 19, 2021

Made with

  • HTML / CSS

About the Code

Grogu Toggle

Slide the toggle to open up “Baby Yoda’s” sleeping pod in this adorable Star Wars-themed

More info: Link

Dependency:


Author

  • Jon Kantner
  • September 23, 2021

Made with

  • HTML / Sass / JS

About the Code

This Toggle Switch is Dangerous

If you’re careful with Jon Kantner’s toggle switch, it toggles off and on, no problem. If you’re not careful…look out!

More info: Link

Dependency:


Author

  • Yoav Kadosh
  • October 5, 2021

Made with

  • HTML / CSS

About the Code

3D Orange Switch (Pure CSS)

Yoav Kadosh translates an ultra-realistic Dribbble shot by Voicu Apostol to CSS. Check out the subtle movement and depth behind the toggle as it slides.

More info: Link


Author

  • Katherine Kato
  • March 8, 2018

Made with

  • HTML / SCSS

About the Code

Toggle

Updated on March 15, 2018

More info: Link

Dependency:


Author

  • Jon Kantner
  • November 13, 2018

Made with

  • HTML / SCSS / JS

About the Code

Naturalized Checkbox Toggle Switches

It’s an attempt to make them work more like switches. Drag the handles back and forth and see the checkbox state change.

Updated on November 15, 2018

More info: Link

Dependency:


Author

  • Ashley Watson-Nolan
  • February 11, 2015

Made with

  • HTML / SCSS

About the Code

A bunch of funky CSS3 Toggle Buttons

A collection of toggle buttons that use CSS3 transitions to animate their state when interacted with. Created using HTML and CSS (no JS).

Uses the checkbox :checked state to differentiate between state, and therefore is still semantic and accessible.

More info: Link

Dependency:

Author

  • Keith Pickering
  • January 11, 2015

Made with

  • HTML / SCSS / JavaScript

About the Code

Single-element CSS Toggle Switch

Just another CSS toggle switch.

More info: Link

Dependency: jquery.min.js

Author

  • Aanjulena Sweet
  • February 16, 2017

Made with

  • HTML / Less

About the Code

Bootstrap Button Toggle (On/Off Switch)

Working on a client project that will be using Bootstrap, and needed to build a toggle/switch that came in a couple different sizes. I wasn’t seeing that as a built-in option within Bootstrap, and I didn’t really like the ones already out there that I found from a quick search (I didn’t want to use a plugin, just wanted it to utilize Bootstrap’s built-in JS), so I decided to make my own.

This example is just using the default “Quick Add” Bootstrap CSS & JS, no added/custom JS on my part, I’ve simply utilized Bootstrap’s buttons.js

More info: Link

Dependency:

Author

  • Chris Hart
  • May 30, 2017

Made with

  • HTML / SCSS

About the Code

Accessible toggle-style checkbox

No javascript required! Easily customize the toggle’s appearance by changing the values in the mixins. Go from the default styles to an iOS-style toggle in seconds! Mixins provide control of everything from the color scheme to the transition timing function.

More info: Link

Dependency:

Author

  • Bennett Feely
  • October 23, 2014

Made with

  • HTML / CSS

About the Code

CSS Toggle switches

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

More info: Link

Dependency: jquery.min.js

Author

  • Wayne Dunkley
  • November 25, 2015

Made with

  • HTML / SCSS

About the Code

Pure Css “day and night” toggle

More info: Link

Dependency:

Author

  • Zixuan(Kevin) Fan
  • May 29, 2016

Made with

  • HTML / SCSS / JavaScript

About the Code

Button.css: CSS3 Button Animations

A collection of css3 button animations

More info: Link, GitHub

Dependency: animate.min.css, jquery.min.js

Author

  • Jhey
  • January 8, 2019

Made with

  • Pug / Stylus / JavaScript

About the Code

Project Management Triangle Selector w/ React + CSS Grid

Try selecting all three options! Feel free to share this little form with new clients! The classic iron triangle was recently shared with me in a chat and I figured I’d put together a little form component for it. Instead of wiping only one option, it resets, so you could in theory extend the component to work as a multi-option radio button.

More info: Link

Dependency: react.development.js, react-dom.development.js, prop-types.min.js

Author

  • Daryn St. Pierre
  • October 8, 2020

Made with

  • Pug / SCSS

About the Code

Simple Knobby CSS Toggle switches

More info: Link

Dependency:

Author

  • Sasha
  • May 14, 2020

Made with

  • HTML / SCSS / JavaScript

About the Code

Light/Dark Mode toggle Navigation Bar

Switch between Light/Dark mode with the toggle.

More info: Link

Dependency:

Author

  • Homer Gaines
  • December 26, 2020

Made with

  • HTML / SCSS

About the Code

Accessible Custom CSS Toggle Switch

Homer Gaines demonstrates “how to markup and style a semantic checkbox to look and behave like a CSS toggle switch.”

More info: Link

Dependency:

Author

  • Jon Kantner
  • January 14, 2021

Made with

  • HTML / CSS

About the Code

Faction Toggle: Star Wars Ep. IV–VI

The next in my series of faction CSS toggle switches. This time, from the original Star Wars trilogy.

More info: Link

Dependency: family=Inter&display=swap

Author

  • Abubaker Saeed
  • April 16, 2020

Made with

  • HTML / SCSS / JavaScript

About the Code

CSS Switches

More info: Link

Dependency:

Author

  • Anastasia Goodwin
  • August 2, 2018

Made with

  • HTML / SCSS / JavaScript

About the Code

On/off CSS toggle switch

CSS only animated checkbox toggle on/off switch

More info: Link

Dependency:

Author

  • Sibi13
  • February 13, 2018

Made with

  • Pug / SCSS

About the Code

Toggle switch – only CSS, accessible & semantic

Accessible and semantic toggle switch with only CSS.

More info: Link

Dependency:

Author

  • Tiberiu Raducea
  • May 5, 2020

Made with

  • HTML / SCSS

About the Code

Option toggle CSS only

Option toggle CSS only

More info: Link

Dependency:

Author

  • Hailjake
  • August 14, 2016

Made with

  • HTML / Less / JavaScript

About the Code

Pure Css iOS Toggle Button

Simulate iOS toggle button with html and less

More info: Link

Dependency:

Author

  • Sergey
  • May 12, 2016

Made with

  • Pug / Stylus / JavaScript

About the Code

toggle material

toggle button

More info: Link

Dependency:

Author

  • Ian Turner
  • January 22, 2018

Made with

  • HTML / SCSS

About the Code

CSS Flip Check

More info: Link

Dependency:

Author

  • Gerta Xhepi
  • March 15, 2016

Made with

  • Haml / SCSS

About the Code

CSS3 Checkbox

More info: Link

Dependency:

Author

  • Aditya Bhandari
  • February 29, 2016

Made with

  • HTML / SCSS

About the Code

Custom CSS Toggle Switch Inspiration (Pure CSS)

A simple toggle in pure CSS3 with a clean HTML markup which includes a label. Leave the label blank if you want do not want any text.

More info: Link

Dependency:

Author

  • Jeff Powers
  • March 31, 2016

Made with

  • HTML / SCSS

About the Code

Toggle CSS only

Just a simple toggle from a project I’m working on.

More info: Link

Dependency:

Author

  • JP Nothard
  • January 5, 2014

Made with

  • HTML / Less

About the Code

CSS only simple checkbox’s”

More info: Link

Dependency: jquery.min.js

Author

  • MacKenzie Bobbitt
  • May 17, 2017

Made with

  • HTML / CSS

About the Code

Another Toggle

More info: Link

Dependency:

Author

  • Hanan Al-Mashhadani
  • January 24, 2016

Made with

  • HTML / SCSS

About the Code

Switch-Toggle

More info: Link

Dependency:

Author

  • Nail Davlyatchin
  • December 29, 2015

Made with

  • HTML / CSS

About the Code

Shiny CSS Toggle Switches

Shiny Toggle Switches made with CSS3 and conic-gradient.js

More info: Link

Dependency: conic-gradient.js

Author

  • Vincent Durand
  • September 15, 2015

Made with

  • HTML / CSS

About the Code

Gooey CSS toggle switch

Gooey checkbox CSS only

More info: Link

Dependency:

Author

  • Chris Bracco
  • September 22, 2015

Made with

  • HTML / Less

About the Code

CSS Checkbox Toggle Switch

Use CSS to style a checkbox input element to appear like a CSS toggle switch.

More info: Link

Dependency:

Author

  • Nicolas Lanthemann
  • June 28, 2016

Made with

  • Pug / SCSS / JavaScript

About the Code

Switch Button

Pizza or Pasta ?

More info: Link

Dependency:

Author

  • jagzviruz
  • August 24, 2015

Made with

  • Pug / Less

About the Code

A super soft CSS toggle switch

Just felt like making a super soft CSS toggle switch that I would toggle the hell out off..

More info: Link

Dependency: animate.min.css, bootstrap.min.css

Author

  • Travis Arnold
  • May 5, 2016

Made with

  • HTML / SCSS

About the Code

Material CSS Switch

Google Material inspired CSS checkbox switch.

More info: Link

Dependency:

Author

  • Andreas Storm
  • July 20, 2015

Made with

  • HTML / Stylus / JavaScript

About the Code

Material Design Toggle

More info: Link

Dependency:

Author

  • Lorenzo D’Ianni
  • October 7, 2015

Made with

  • HTML / SCSS

About the Code

Material Design – Switch

A simple material design switch in sass, with toggle hide show without js

More info: Link

Dependency:

Author

  • Mike Busby
  • May 15, 2015

Made with

  • HTML / SCSS / JavaScript

About the Code

Pure CSS3 Slider Toggle

CSS3 Slider Toggle, takes inspiration from iOS, Android and Material Design

More info: Link

Dependency:

Author

  • Christian Naths
  • April 11, 2015

Made with

  • Haml / SASS / CoffeeScript

About the Code

Checkbox Switch

A simple, gummy little switch thingy. Now accelerated for touch devices! All JS can be removed though and it will still work.

More info: Link

Dependency:

Author

  • SitePoint
  • March 31, 2015

Made with

  • HTML / SCSS / JavaScript

About the Code

Transformicons Checkbox

Theming Form Elements with Sass

More info: Link

Dependency:

Author

  • Christian Petersen
  • March 16, 2015

Made with

  • HTML / SCSS / JavaScript

About the Code

UISwitch II

Inherited from my previous UISwitch. Includes more customization.

More info: Link

Dependency: jquery.min.js

Author

  • jpolete
  • January 26, 2016

Made with

  • HTML / SCSS / JavaScript

About the Code

Progressively Enhanced Toggle

Wrap a radio button pair (yes/no, on/off, etc) in a div.j-toggle to get an iOS-style css toggle switch. Uses data uri for background images.

More info: Link

Dependency:

Author

  • Darren
  • May 12, 2015

Made with

  • HTML / Less

About the Code

Checkbox Button Toggle

Responsive checkbox set by font size, easily set the inner text for on and off states.

More info: Link

Dependency:

Author

  • Jonathan Levaillant
  • January 29, 2015

Made with

  • HTML / CSS

About the Code

Radio Buttons

no JS, no img, full em, editable text (flexible)

More info: Link

Dependency:

Author

  • Fitz
  • September 12, 2013

Made with

  • HTML / SCSS

About the Code

Eye Switch

More info: Link

Dependency: jquery.min.js

Author

  • Anders Schmidt Hansen
  • January 20, 2015

Made with

  • Slim / SCSS / CoffeeScript

About the Code

Expanding The Card Metaphor: Nested Layers

This card also includes the basic horizontal rotation to view the back of the card, but the main focus is on the extra layer revealed by clicking “View advanced…”.

Disclaimer: Tested to work in latest Chrome, no guarantees in other browsers.

More info: Link

Dependency: jquery.min.js

Author

  • kryo
  • January 10, 2015

Made with

  • Pug / SCSS / JavaScript

About the Code

CSS only toggle buttons

Supports different control positions, as well as label being clickable like standard labels.

More info: Link

Dependency:

Author

  • Mauricio Allende
  • September 6, 2017

Made with

  • Pug / SCSS / JavaScript

About the Code

Pure CSS toggle buttons

More info: Link

Dependency:

Author

  • oobleck
  • July 23, 2015

Made with

  • HTML / SCSS

About the Code

YA Pure (S)CSS toggle switch

Like several others out there, this is a switch. it is also bootstrap compatible.

More info: Link

Dependency: font-awesome.min.css, jquery.min.js

Author

  • flora
  • October 30, 2017

Made with

  • HTML / CSS

About the Code

Checkbox

More info: Link

Dependency:

Author

  • Billy
  • August 24, 2015

Made with

  • HTML / 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.

More info: Link

Dependency:

Author

  • Malik Dellidj
  • November 24, 2014

Made with

  • HTML / SCSS

About the Code

iOS7+ Toggle Switch CSS Only”

Last year we created an hybrid app for AXA France, and the client wanted the exact same style and animation as possible for the checkboxes. Today I decided to release it 🙂

More info: Link

Dependency: font-awesome.min.css

Author

  • Sergey
  • September 1, 2016

Made with

  • Pug / Stylus / JavaScript

About the Code

Switch from Google Material Design

More info: Link

Dependency: jquery-ui.css

Author

  • Ricardo Goldstein
  • July 23, 2015

Made with

  • HTML / SCSS

About the Code

Tri-state Toggle Button (CSS only)

More info: Link

Dependency:

Author

  • Chris Hart
  • May 30, 2017

Made with

  • HTML / SCSS

About the Code

Accessible toggle-style checkbox

No javascript required! Easily customize the css toggle switches appearance by changing the values in the mixins. Go from the default styles to an iOS-style toggle in seconds! Mixins provide control of everything from the color scheme to the transition timing function.

More info: Link

Dependency:

Author

  • Bandar Raffah
  • September 17, 2016

Made with

  • HTML / CSS

About the Code

iOS7 style switch with CSS

Using translate3D to move the knob

More info: Link

Dependency:

Author

  • Leigh McDonald
  • October 17, 2014

Made with

  • HTML / CSS / JavaScript

About the Code

Google Material Switch Control

Google material inspired switch control using Greensock (GSAP).

More info: Link

Dependency: jquery.min.js, TweenMax.min.js

Author

  • Andrew
  • October 7, 2014

Made with

  • HTML / CSS / JavaScript

About the Code

Awesome Toggle Button

Two very nice radio buttons joined together as a css toggle switch.

More info: Link

Dependency:

Author

  • Hugo
  • September 24, 2014

Made with

  • HTML / SCSS / JavaScript

About the Code

Switch Button

Switch button coding from dribble still needing some fixes

More info: Link

Dependency: jquery.min.js

Author

  • Eric Sadowski
  • April 20, 2015

Made with

  • HTML / CSS

About the Code

Scalable Dribbble Switches

Styled checkboxes as inspired by Dribbble concepts.

More info: Link

Dependency:

Author

  • Andrew Trickett
  • February 25, 2016

Made with

  • HTML / CSS

About the Code

CSS Toggle Switch

IOS like CSS toggle switches with clickable label for extra accessibility.

More info: Link

Dependency:

Author

  • Jonathan Suh
  • July 16, 2014

Made with

  • HTML / SCSS

About the Code

On/off css toggle switch with checkbox (No JavaScript)

More info: Link

Dependency:

Author

  • Sawyer Bateman
  • July 14, 2014

Made with

  • HTML / CSS

About the Code

More info: Link

Dependency:

Author

  • Jason Weaver
  • November 28, 2013

Made with

  • Pug / SCSS / CoffeeScript

About the Code

expswitch

Really liked this switch on Dribbble. Wanted to see if I could make an all css version. Gave me an excuse to use the clip property.

More info: Link

Dependency:

Author

  • Carlos Perez
  • July 8, 2014

Made with

  • HTML / Less

About the Code

Toggle Switch

A nice and clean toggle switch that relies only on CSS. 

More info: Link

Dependency:

Author

  • Eduardo Lopes
  • July 3, 2014

Made with

  • HTML / CSS / JavaScript

About the Code

Daily Pen #002: Simple switch using canvas

A really simple switch using canvas, you can use the gui to modify.

Update 1: Now can change background color of the switch Update 2: Change the body background color when on or off

More info: Link

Dependency:

Author

  • mshevtsov
  • June 29, 2014

Made with

  • HTML / CSS

About the Code

Pure CSS Toggles

More info: Link

Dependency:

Author

  • Mandy Bee
  • July 15, 2014

Made with

  • HTML / CSS

About the Code

CSS Toggle / Checkbox Replacement

This toggle works in IE9+, FF 30, Chrome 35, and Safari 7 (maybe lower, I haven’t tested).

More info: Link

Dependency:

Author

  • Michael Watts
  • June 27, 2014

Made with

  • Haml / SCSS / CoffeeScript

About the Code

CSS3 toggle buttons

CSS3 toggle buttons that could be plugged into radio buttons. Using Bootstrap Glyphicons but if your font of choice has symbols can include them instead

More info: Link

Dependency: bootstrap.min.css, bootstrap-glyphicons.css, jquery.min.js

Author

  • LukyVJ
  • June 27, 2014

Made with

  • HTML / CSS / JavaScript

About the Code

Buttons, Lights & Shadows

More info: Link

Dependency:

Author

  • pluton wan
  • March 19, 2013

Made with

  • HTML / CSS / JavaScript

About the Code

oldschool toggeler in CSS3

a retro looking, CSS only button.

More info: Link

Dependency:

Author

  • reza
  • February 25, 2013

Made with

  • HTML / CSS

About the Code

More info: Link

Dependency:

Author

  • Joey Hoer
  • July 29, 2013

Made with

  • HTML / CSS / JavaScript

About the Code

Slide to Check

A mobile friendly interactive checkbox. Slide or tap the checkbox to toggle it.

More info: Link

Dependency:

W3TWEAKS
Latest posts by W3TWEAKS (see all)

Comments

Leave a Reply

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