If you are into web development you will for sure know what a “toggle switch” is. There’s almost no website or web application that is not using them nowadays.
But if we have to define them somehow, we can say a Toggle Switch is a design element that allows users to choose between two different states. It’s commonly used in websites, mobile apps, and other software.
A toggle switch is not a native element when used in web development, so developers have devised ways to mimic it using only HTML and CSS. Traditionally, developers used the checkbox element instead, but a toggle switch is visually more appealing.
CSS toggle switches usually use a hidden checkbox under the hood to keep track of the state of the toggle switch.
Here’s a list of the best CSS toggle switch examples we’ve found out there. All of the toggles in the list are made in pure CSS and without a single line of JavaScript involved:
1. CSS Toggle Switch With Text
If you need a toggle with a short text like “Yes” or “No”, then you’ll love this one by Himalaya.
This toggle example comes with 18 different effects. And the best thing is that each is better than the previous one!
You can go from the traditional toggle switch to something a bit braver, passing through more normal switches but with a slight touch that makes them stand out.
The animations are all done in pure CSS, and they are super smooth!
2. Pure CSS Toggle Switch
Created by Marcus, this is the basic and probably the perfect toggle switch for those looking for a CSS-only toggle switch.
What I personally like about it is that it has an additional animation that takes place just when we click on the toggle, before we release the button.
This small animation cleverly adds a small yet noticeable elastic effect that gives this switch a modern feel.
3. CSS Toggle Switch Button
Some people might be looking for actual buttons with a toggle state. The term toggle switch button can be a bit confusing, but if you are looking for buttons with two states, this example is for you.
This switch was created by Mauricio and contains five different switches, two of which are considered buttons.
The skewed and the flip effects might be what you are looking for!
4. iOs Toggle Switch CSS
It was very probably iOS with their iPhone that made toggle trendy in web development, so it’s not unexpected that many people like to mimic this same look and feel for their website.
Here’s a good example by coldsoul of a toggle switch that mimics that same effect and that does it with the same design and functionality.
And of course, it also supports touch devices.
5. Dark Mode Toggle Switch
We all love dark mode. And if you plan on implementing it in your site, you’ll probably use some kind of toggle switch by Saba.
This switch has been designed specifically for this purpose and the result is just beautiful.
The switch changes from a white moon icon with a dark background (the night) to a circle representing the sun over a white background.
It’s a pure CSS switch, so no JavaScript to worry about! Pure beauty!
6. Label for Toggle Switch
Every input usually has a label element associated with it to provide a description. When using a toggle switch, you might want to do the same.
While you’ll probably be able to integrate a label with most of the previous toggles we’ve named in the article, here’s an example of another switch that includes the label so you can just copy and paste if you wish.
Notice how the toggle switches its state when clicking over the label. When implemented correctly, this is the expected behavior for labels.
Thanks to Morgan for creating this beautiful toggle.
7. Toggle Switch with Rolling Label
If you want to get fancy with the toggle labels, here’s a great example of bringing it to the extreme.
This toggle created by Jon will change its label based on its state, but it does it in a quite unexpected way. The label changes with a nice easing effect, and the whole background of the page changes with it.
It is ideal to use as a big element in a full-screen website, especially if you want to use the sliding background effect that comes with it.
8. Accessible Toggle Switch With Check
Accessibility should be a priority on the web nowadays. This toggle, by the hand of Homer switch, proves to us that beauty and design can go hand in hand.
You can test its accessibility by using the keyboard to trigger the change of state. Click on it and then use the spacebar key to toggle between both states.
In addition, notice how the element is focusable when you hit the tab key, which is the expected behavior for most input elements.
And if you still need more, this toggle also admits the disabled attribute and behaves accordingly but not admitting focus or reacting to the keyboard or mouse events.
9. Darkmode Toggle Switch
This black-and-white toggle switch is perfect for a dark mode or a dark-themed website.
It includes the styles for the disabled state that will come on handy for some web applications.
10. Bootstrap 5 CSS Toggle Switch
If you are using Bootstrap, you might want to check out this Codepen example created by Nisharg.
It uses Bootstrap 5 and showcases different toggle switch sizes by using purely HTML and CSS on top of the Bootstrap CSS file.
11. Elastic Toggle Switch CSS
This example by Sivacva adds a little touch of originality to the traditional switch by adding two additional effects. A glow or shadow that appears when the switch is ON, and some kind of elastic effect.
This makes this toggle effect a bit more unique and satisfying to use than others while keeping it simple.
12. Sun And Moon Toggle Switch
This toggle by Satyam brings dark mode to the next level by using much more detailed graphics.
It uses the figures of the sun and the moon to represent both states, dark and light modes.
The yellow sun is represented with a blue background as the sky and the white moon with a black sky and a star.
I personally love the animations taking place on this toggle switch. The sun becomes a star and the moon appears from the very bottom.
If you are into animations like me, you’ll also love this collection of amazing CSS text animations.
13. Colored Toggle Switch
This toggle comes in 3 colors: green, red and blue. And in two different shapes: circles and squares.
It also contains styles for the “focus” state which adds a subtle shadow on the toggle when it’s focused.
You can fully customize their colors and sizes to your needs.
14. Dark Mode Switch With Text
Sometimes, you might want to add a complete word inside the toggle switch instead of using an external label for it.
If that’s the case, this toggle example by Nadeesha will for sure bring you joy 🙂
In addition to having a complete world, this toggle example is specifically designed to be used for websites that include dark mode.
You’ll notice how the whole page becomes black or white depending on its state.
15. Day and Night Toggle Switch
If you want to go all over the top with fancy effects, you can not miss this toggle switch by Raunaq.
This day and night switch is absolutely a piece of art. There’s so much detail on it. Made with great design taste, this toggle shows a beautiful sun with moving clouds and a moon with falling stars.
It’s almost unbelievable this is done with pure CSS!
16. Huge Toggle Switch
Here’s another example of a day and night toggle brought to the very extreme by Lurx.
It is ideal to use in a huge size for websites with a fun or casual vibe that want to catch the visitor’s attention and create a unique experience for them.
Made with only CSS.
17. Rolling Toggle Switch
Here’s a beautifully designed and pure CSS toggle switch coded by Claudia that some rolling animation.
It uses a figure of the Star Wars robot RD-D2 to add a touch of fun to it.
18. Colored Toggle Switch – Rounded and Rectangular
Here’s an example of multiple toggles with different colors in both, rounded and square shapes.
Brought to life by Kunduz, this switch comes with two color intensities depending on the switch state.
I personally like the rounded toggle, but there might be cases where the square one can come in handy.
19. Three States CSS Toggle Switch
Who said a toggle switch can only have two labels or two states?
In this example, Ricardo shows us that a toggle switch can contain three states and, why not, three labels if you place them on top of each state.
And all of it was done with no JavaScript at all. Impressive uh?
20. Pure CSS Dark Mode Toggle
A great switch example was brought by Benjamin that results in a pretty beautiful toggle element by just using CSS.
In addition, it’s a toggle switch with two labels that can be quite useful. The easing animations are smooth and add a modern touch to this toggle.
