Let's create a custom toggle switch using HTML and CSS.

Hello everyone! In this quick tutorial, let's learn how to create a custom toggle switch using HTML and CSS.

Step 1 - The HTML.

<label class="switch">
     <input type="checkbox" class="checkbox">
     <span class="toggle-thumb">

          <svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" viewBox="0 0 24 24" style="fill:#4ADE80;transform:;-ms-filter:"><path d="M10 15.586L6.707 12.293 5.293 13.707 10 18.414 19.707 8.707 18.293 7.293z"></path></svg>

          <svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" viewBox="0 0 24 24" style="fill:#F87171;transform:;-ms-filter:"><path d="M16.192 6.344L11.949 10.586 7.707 6.344 6.293 7.758 10.535 12 6.293 16.242 7.707 17.656 11.949 13.414 16.192 17.656 17.606 16.242 13.364 12 17.606 7.758z"></path></svg>

     </span>
</label>

Here, the label with the class 'switch' is like the main container of our switch. The span with the class of 'toggle-thumb' is the circle part of the switch and inside this span are the 2 SVG icons that we are going to use. And We will use the checkbox to toggle the switch.

Step 2 - Basic Styles

.switch {
      display: inline-block;
      width: 60px;
      height: 34px;
      position: relative;
    }

.toggle-thumb {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      display: flex;
      justify-content: space-between;
      align-items: center;
      background-color: #475569;
      border-radius: 40px;
      cursor: pointer;
    }

After these styles, the switch should look like this

Step 3 - Creating the toggle thumb and hiding the checkbox.

For creating the toggle thumb we need to add the '::before' pseudo-element to the 'toggle-thumb'.

 .toggle-thumb:before {
      content: "";
      height: 26px;
      width: 26px;
      position: absolute;
      left: 4px;
      bottom: 4px;
      border-radius: 50%;
      background-color: #E2E8F0;
      transition: .4s all ease;
    }

And to hide the checkbox

.checkbox {
      opacity: 0;
      width: 0;
      height: 0;
    }

It should look like this now,

Step 4 - Adding the functionality.

To add the functionality to our switch we need to add transform to our 'toggle-thumb::before' when our checkbox is checked. So to do that,

.checkbox:checked + .toggle-thumb:before {
      transform: translateX(26px);
    }

That's it. Here is the demo of the switch.

Thanks 😀

Comments

[Bill Gouveros]

Nice quick tut! Since it's aimed to beginners, it would also benefit from a quick explanation of why clicking the also influences the invisible checkbox.

[Gaurav]

Oh yea I actually forgot to add that 😅 Thanks for the suggestion

[Matias Borgeaud]

Great tip!
I just did a small change to the CSS to give a transition effect to both the tick and the cross.

.toggle-thumb {
 ...
 overflow: hidden;
}
svg:nth-child(1) {
  position: relative;
  left: -26px;    
}
svg {
  transition: .4s all ease;
}
.checkbox:checked + .toggle-thumb > svg {
  transform: translateX(26px);
}

[Gaurav]

Hey! This looks amazing😍🤩 Thank u so much!

[Bjørn Erik Sandbakk]

Thanks for a great example. A question, can this be done with radio as well? I see a great benefit in some radio choice lists using this technic.

Greatings from Norway.

[Gaurav]

Hey, thanks! Yes, I think we can also create a custom radio button. I've never tried it but I will try😀

[Konstantin Rouda]

Good article, nicely done. I remember I've done something similar and even tried to make a web component from it.
I've called it switch-web-component

[Gaurav]

Nice😀

[Matyi Csorba]

Cool example. I love these pure css solutions.
Here's mine
codepen.io/Tyutyesz/pen/VwvNbbZ

[Gaurav]

Looks nice. clean and minimal

[Anass Boutaline]

Great article, i never tried to use css do that, alwayse use js to trigger an event, but css seems to be more accurate, thanks

[Gaurav]

Thanks!

[nikhilmwarrier]

Awesome! I made one, but without svg...
Now I will try this too!!!

[Francis Provost]

Really nice! I love that you used :checked instead of using some JS.

Don't forget to make it accessible to screen readers.
For that I would replace the label by a span. The input would be labelled somewhere else in the form. I would add aria-hidden on the span. That way screen readers will ignore the svgs that are not important for to understand the input.

[Gaurav]

Hey, thanks! I will surely make these changes.😄

[Deepak Pal]

Nice one like it

[Gaurav]

Thank u!