Css switch on off

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

Источник

Top 20 CSS Toggle Switches [With Examples]

When it comes to building a responsive design, web designers face different challenges. One such challenge is choosing between toggle switches, checkboxes, or radio buttons. However, using toggle switches is a far better choice, as it allows you to select between opposite modes, such as on/off, turning on a light bulb, turning off a microwave, and so on. CSS toggle switches are an excellent technique to increase website responsiveness, functionality and include micro-interactions. By incorporating CSS toggle switches in the websites and web applications, you can certainly keep your visitors engaged. A central concept in mobile devices, toggle switches are extremely UI friendly and uplifts a web page’s confidence in front of its users. In this post, we look at what CSS toggle switches are, how to construct a basic CSS toggle switch, and the best CSS toggle switches examples. Let’s begin! New to CSS Selectors? Check out this Ultimate CSS Selector cheat sheet to boost your web designing career. Did you know? Portals provide an easy way for a HTML page to load another page as an inset window. This technique allows developers to create pages with links to a new page without requiring the user to navigate through a new browser window.

What Are CSS Toggle Switches?

The CSS toggle switch is a front-end concept of defining a checkbox in a UI-rich method that works as a toggle between anything you want. For example, you can use the toggle switch to toggle between the dark theme and light theme, or you can use the toggle switch as a “Yes or No” answer for a question. A recent one of the CSS toggle switches examples are shown below: There are no written rules or restrictions on using the CSS toggle switches. As a result, it can be used for absolutely anything you want to do with your websites (or web applications).

How To Construct A Basic CSS Toggle Switch?

This section will discuss the basic elements of web design involved in the CSS toggle switches and how to combine them to construct one. First of all, a toggle switch is a checkbox element which got a makeover. A plastic surgery, perhaps. Abiding by the rules of a checkbox, you can use the toggle switch for binary associations only. These may include “Buy or Sell,” “Yes or No,” “Left or Right,” “Day or Night,” and so on. Below is the source code for constructing a checkbox.

We will hide the checkbox from the display as we don’t need people to see it in the front-end even though we need to know about its current stage for toggling.

Now we have an empty web page at the display and a checkbox in our code. As a next step, we design the toggle box and connect it with our checkbox. The following code will help you get a head start.

The output of the code looks as follows: You can design this label in any shape and color you want. The above code runs on a cloud-based cross-browser testing platform — LambdaTest. LambdaTest can help you render websites and web apps quickly on many browsers, browser versions, operating systems, and resolutions. Hosting such a collection aims to help developers ensure their web applications are consistent across various platforms. So you can give it a try and experience the features it offers. Physical Button Type CSS Toggle Switch We are now ready with the space that will act as toggle boundaries on our web page. Here we need a beautiful button on it and move it across each end. To make that element, knowledge of pseudo-elements. is necessary. If you want to recall pseudo-elements and their work, you can refer to our ultimate CSS selectors cheat sheet blog. The following code creates a different colour shape inside the label:

The output would look as follows: We can mix CSS animation to let the browser know we intend to move this smaller element inside to the other end.

To know more about calc function, refer to our blog fluid typography with CSS clamp. The combined code now produces the animation, as shown below. Like how I connected animation to the checked input button in the above demonstration, you can connect JavaScript and perform the necessary actions. In the next section, we will see some attractive examples of the CSS toggle switches.

CSS Toggle Switch Examples

1. The Checkbox Toggle Switch

 *, *:before, *:after < box-sizing: border-box; margin: 2px; padding: 2px; >:root < font-size: calc(64px + (80 - 64) * (100vw - 320px)/(960 - 320)); >body, input < font-size: 1.5em; line-height: 1.5; >body < background: #a2a7e8; >input < display: block; margin-bottom: 1.5em; >main < padding: 1.5em 0 0 0; text-align: center; >.l < background-color: rgba(0,0,0,0.4); border-radius: 0.75em; box-shadow: 0.120em 0.120em 0 0.120em rgba(0,0,0,0.1) inset; color: #f5d831; display: inline-flex; align-items: center; margin: auto; padding: 0.15em; width: 3.5em; height: 1.5em; transition: background-color 0.1s 0.5s ease-out, box-shadow 0.1s 0.5s ease-out; >.l:before, .l:after < display: block; >.l:before < background-color: #c9bbbb border-radius: 54%; width: 1em; height: 1em; transition: background-color 0.1s 0.3s ease-out, transform 0.3s ease-out; z-index: 1; >.l:after < background: linear-gradient(transparent 46%, rgba(0,0,0,0.15) 0) 0 50% / 50% 100%, repeating-linear-gradient(90deg,#bbb 0,#bbb,#bbb 20%,#777 20%,#777 40%) 0 50% / 50% 100%, radial-gradient(circle at 50% 50%,#888 25%, transparent 30%); background-repeat: no-repeat; border: 0.25em solid transparent; border-left: 0.7em solid; border-right: 0 solid transparent; transition: border-left-color 0.1s 0.4s ease-out, transform 0.4s ease-out; transform: translateX(-24%); transform-origin: 25% 50%; width: 1.3em; height: 1em; >.l:checked < background-color: rgba(0,0,0,0.45); box-shadow: 0.125em 0.125em 0 0.125em rgba(0,0,0,0.1) inset; >.l:checked:before < background-color: currentColor; transform: translateX(125%) >.l:checked:after < border-left-color: currentColor; transform: translateX(-2.5%) rotateY(180deg); >.l:focus < outline: 0; 

Источник