Toggle menu with css

20 Best Toggle Switches [Pure CSS Examples]

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.

What is a CSS toggle switch?

It’s a design element that provides the users a way to choose between two different states. Commonly used in websites, mobile apps, and other software.

When used in web development, a toggle switch is not a native element so developers have come up with ways to mimic this element by using only HTML and CSS.

Usually, a hidden checkbox is used under the hood to keep track of the state of the toggle switch.

20 best CSS toggle switch

Here’s a list of the best CSS toggle switch examples we’ve found out there. All of them in pure CSS and with not a single line of JavaScript involved:

1. 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!

2. CSS Toggle Switch With Text

If you need a toggle containing a short text like «Yes» or «No», then you’ll love this one by Himalaya.

This example of a toggle 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 more brave 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!

3. 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 adds in a very clever way a small yet noticeable elastic effect that gives this switch a modern feel.

4. CSS Toggle Switch button

Some people might be looking for actual buttons that have a toggle state. The term toggle switch button can be a bit confusing, but if you are looking for actual buttons with two states, this example is for you.

This switch was created by Mauricio and it contains 5 different switches from which two of them are considered buttons.

The skewed and the flip effects might be what you are looking for!

5. 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.

6. Label for toggle switch

Usually, every input 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. This is the expected behavior for labels when implemented correctly.

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 how to bring 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 some nice easing effect and the whole background of the page change with it.

Ideal to use as a big element in a full-screen website. Especially if you want to also 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 be hand by 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 admiting focus or reacting to the keyboard or mouse events.

10. Bootstrap 5 CSS toggle switch

If you are using Bootstrap, then 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 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 at the same time keeping it simple.

12. Sun And Moon Toggle Switch

This toggle by Satyam brings dark mode into 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.

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 including 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 a 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.

Ideal to use in a huge size for not websites with fun or casual vibe that want to catch the visitor’s attention and create a unique experience for them.

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 some 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?

Ricardo shows us in this example that a toggle switch can contain three states, and why not, even 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 brought by Benjamin that results in a quite beautiful toggle element by just using CSS.

On top of that, it’s a toggle switch that comes with two labels that can be quite useful too. The easing animations are smooth and add a modern touch to this toggle.

Related articles

Источник

15 CSS Toggle Menus

Collection of hand-picked free HTML and CSS toggle menu code examples from codepen and other resources. Update of December 2018 collection. 5 new items.

Related Articles

Author

Links

Made with

About a code

Pure CSS Toggle Menu Button

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

Author

Links

Made with

About the code

Hidden Menu

HTML5 and CSS3 hidden menu.

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

Author

Links

Made with

About the code

Vertical Color-Adapting CSS Menu

Simple vertical animated CSS hamburger menu with that adapts to the background color using mix-blend-mode .

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

Author

Links

Made with

About a code

Animated Menu

Concept for animated social menu. Pure CSS.

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

Author

Links

Made with

About a code

CSS Toggle Menu

Simple expanding menu using only CSS. The idea could be further refined with a tiny bit of JavaScript to automatically set the width to adjust based on the contents, allowing for buttons of varying width or expansion of the menu without changing the CSS.

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

Author

Links

Made with

About the code

Pure CSS Toggle Menu

Its a simple toggle menu for header.

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

Author

Links

Made with

About a code

Simple JS Mobile Navigation

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

Author

Links

Made with

About the code

Vertical Layout with Navigation

Vertical scrolling sections of content with mobile hamburger navigation. Animations easily customized.

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

Dependencies: font-awesome.css, jquery.js

Author

Links

Made with

About the code

Gooey Menu

Gooey menu with CSS and SVG filters. Version 1.

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

Author

Links

Made with

About the code

CSS Gooey Menu (Version 2)

Gooey menu with CSS and SVG filters. Version 2.

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

Author

Links

Made with

About the code

CSS Gooey Menu (Version 3)

Gooey menu with CSS and SVG filters. Version 3.

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

Author

Links

Made with

About the code

CSS Gooey Menu (Version 4)

Gooey menu with CSS and SVG filters. Version 4.

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

Author

Links

Made with

About a code

Triangular Mobile Toggle Navigation

Triangular mobile toggle navigation with HTML and CSS.

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

Author

Links

Made with

About the code

Simple Toggle Navigation

Simple «bubble»-style navigation. Saw something similar on a newspaper’s mobile site (I can’t remember which one) and wanted to try and make it myself.

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

Dependencies: font-awesome.css, jquery.js

Author

Источник

27 Best CSS toggle menus

Collection of hand-picked free CSS toggle menus. All the collections are included with Demo and source codes.

Related Posts:

Author

Link

Made with

About the Code

Burger Menu inspired by Material Design

A simple checkbox burger menu inspired by Material Design for Android.

Author

Link

Made with

About the Code

Apple style mobile menu

Inspired by mobile menu made by Apple. Pretty easy but also pretty efficient in terms of visual impact! 😉 Love the minimalist look of the 2 bars burger.

Author

Link

Made with

About the Code

Gooey Menu Concept

Add button menu concept with gooey animations just using SVG and CSS3.

Author

Link

Made with

About the Code

Fixed Menu Pop Up

A simple fixed pop up menu – tested on Android and Iphone.

Author

Link

Made with

About the Code

Tumblr inspired menu (pure css)

No JS. Inspired somewhat by the Tumblr iPad app post creation menu. Could use animations rather than transitions with different timing on each menu item to fancify it a bit. I just wanted to keep this as simple and straightforward as possible.

Author

Link

Made with

About the Code

Top Drawer Nav Menu

Author

Link

Made with

About the Code

jQuery / CSS navigation menu

Simple jQuery / CSS hamburger style menu button with pop out menu

Источник