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: –
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: –
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: –
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: –
About the Code
Tiny Toggle Switch
A realistic toggle switch is drawn to look its best when really small
More info: Link
Dependency: –
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: –
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: –
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
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
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: –
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: –
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: –
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
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: –
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: –
About the Code
Single-element CSS Toggle Switch
Just another CSS toggle switch.
More info: Link
Dependency: jquery.min.js
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: –
About the Code
CSS Toggle switches
Collection of some fresh, flat toggles. All utilize the “checkbox” hack.
More info: Link
Dependency: jquery.min.js
About the Code
Button.css: CSS3 Button Animations
A collection of css3 button animations
Dependency: animate.min.css, jquery.min.js
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
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
About the Code
CSS Toggle switches
Do you want your toggle fancy or functional? Yes.
More info: Link
Dependency: simple-line-icons.min.css, jquery.min.js
About the Code
Shiny CSS Toggle Switches
Shiny Toggle Switches made with CSS3 and conic-gradient.js
More info: Link
Dependency: conic-gradient.js
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
Small switch with css animations
More info: Link
Dependency: bootstrap.min.css, jquery.min.js
About the Code
UISwitch II
Inherited from my previous UISwitch. Includes more customization.
More info: Link
Dependency: jquery.min.js
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
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
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
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: –
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
Switch Button
Switch button coding from dribble still needing some fixes
More info: Link
Dependency: jquery.min.js
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
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
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
Leave a Reply