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.
About the Code Friendly Donut Toggle Updated on January 20, 2021
More info: Link
Dependency:
gsap , CSSRulePlugin , CustomBounce3 , CustomEase3 , CustomWiggle3 , DrawSVGPlugin3 , Draggable , EaselPlugin , EasePack , GSDevTools3 , InertiaPlugin , MorphSVGPlugin3 , MotionPathHelper , MotionPathPlugin , Physics2DPlugin3 , PhysicsPropsPlugin3 , PixiPlugin , ScrambleTextPlugin3 , ScrollToPlugin , SplitText3 , TextPlugin
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 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: –
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 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 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: –
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 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 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 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 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: –
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 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 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 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 About the Code Toggle Updated on March 15, 2018
More info: Link
Dependency: –
Author Jon Kantner November 13, 2018 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
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
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
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: –
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
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
About the Code Pure Css “day and night” toggle More info: Link
Dependency: –
Author Zixuan(Kevin) Fan May 29, 2016
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
About the Code Simple Knobby CSS Toggle switches More info: Link
Dependency: –
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
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
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
About the Code CSS Switches More info: Link
Dependency: –
Author Anastasia Goodwin August 2, 2018
About the Code On/off CSS toggle switch CSS only animated checkbox toggle on/off switch
More info: Link
Dependency: –
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
About the Code Option toggle CSS only Option toggle CSS only
More info: Link
Dependency: –
About the Code Pure Css iOS Toggle Button Simulate iOS toggle button with html and less
More info: Link
Dependency: –
Made with Pug / Stylus / JavaScript
About the Code toggle material toggle button
More info: Link
Dependency: –
Author Ian Turner January 22, 2018
About the Code CSS Flip Check More info: Link
Dependency: –
Author Gerta Xhepi March 15, 2016
About the Code CSS3 Checkbox More info: Link
Dependency: –
Author Aditya Bhandari February 29, 2016
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
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
Author MacKenzie Bobbitt May 17, 2017
About the Code Another Toggle More info: Link
Dependency: –
Author Hanan Al-Mashhadani January 24, 2016
About the Code Switch-Toggle More info: Link
Dependency: –
Author Nail Davlyatchin December 29, 2015
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
About the Code Gooey CSS toggle switch Gooey checkbox CSS only
More info: Link
Dependency: –
Author Chris Bracco September 22, 2015
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
About the Code Switch Button Pizza or Pasta ?
More info: Link
Dependency: –
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
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 Paweł Wodkowski July 23, 2015
Author Lorenzo D’Ianni October 7, 2015
About the Code Material Design – Switch A simple material design switch in sass, with toggle hide show without js
More info: Link
Dependency: –
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: –
About the Code Transformicons Checkbox Theming Form Elements with Sass
More info: Link
Dependency: –
Author Christian Petersen March 16, 2015
About the Code UISwitch II Inherited from my previous UISwitch. Includes more customization.
More info: Link
Dependency: jquery.min.js
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: –
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
About the Code Radio Buttons no JS, no img, full em, editable text (flexible)
More info: Link
Dependency: –
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
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
About the Code Pure CSS toggle buttons More info: Link
Dependency: –
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
About the Code Checkbox More info: Link
Dependency: –
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
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
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
About the Code Tri-state Toggle Button (CSS only) More info: Link
Dependency: –
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
About the Code iOS7 style switch with CSS Using translate3D to move the knob
More info: Link
Dependency: –
Author Leigh McDonald October 17, 2014
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
About the Code Awesome Toggle Button Two very nice radio buttons joined together as a css toggle switch.
More info: Link
Dependency: –
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
About the Code Scalable Dribbble Switches Styled checkboxes as inspired by Dribbble concepts.
More info: Link
Dependency: –
Author Andrew Trickett February 25, 2016
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
About the Code On/off css toggle switch with checkbox (No JavaScript) More info: Link
Dependency: –
Author Sawyer Bateman July 14, 2014
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: –
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
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: –
About the Code Pure CSS Toggles More info: Link
Dependency: –
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 Buttons, Lights & Shadows More info: Link
Dependency: –
About the Code oldschool toggeler in CSS3 a retro looking, CSS only button.
More info: Link
Dependency: –
About the Code More info: Link
Dependency: –
About the Code Slide to Check A mobile friendly interactive checkbox. Slide or tap the checkbox to toggle it.
More info: Link
Dependency: –
Discussion about this post