DEV Community

How to create a custom Toggle Switch using CSS

Karan Developer on July 31, 2021

Let's create a simple customized toggle switch using CSS. Initially when I was trying to create this, I founded it very confusing because many deve...

Read full post

cs-mshah • Aug 1 '21

I have seen many toggle switches. But can you tell me how to design one which can resize easily. like it should have a size similar to the text element before it. If I change the pixels, things start falling apart. Can you write the css in terms of percentage or something and give an example on how to put it next to different sized texts. This would really be very helpful.

Jan • Aug 2 '21 • Edited

That's exactly what i thought and besides from that, none of those switches handles the actual label with text. So i played around and came up with this one:

codepen.io/nghh/pen/abWKXEK

You just need to edit these variables:

    /* overall size */
    --size: 1.5em;

    /* Finetune switch */
    --height: 2em;
    --width: 4em;
    --border: 0.2em;
    --font-size: 1em;
    --switch-color-checked: darkcyan;
    --switch-color-unchecked: lightgrey;
    --dot-color-checked: white;
    --dot-color-unchecked: white;

Cheers

cs-mshah • Aug 2 '21

yes! this is much better.

Koen Ahn • Aug 1 '21

You could use EM units instead of PX! :) Then change the container's font-size to adapt the switch's size.

jlop • Aug 2 '21

I don't know why but my label doesnt appear , and after trying my self i copied the code and it still not working ,i dont know why

Karan Developer • Aug 2 '21

Please share me your Codepen Pen link, I'll definitely look into it !

jlop • Aug 2 '21

codepen.io/jlopy/pen/KKmeYBK

The css of the label is a copy paste of yours , I only did the firsts steps because its not working , thank you for be helpful

Karan Developer • Aug 2 '21 • Edited

First of all, Thankyou for encountering this problem!

Reason
The main difference between your and my code is of Display property. Default property is display:inline;

But I've used flexbox to make my button center to body, In this case body is flex-container and my <label> is flex-item and default display property of flex-items are display:block. And in your case <label> is display: inline;

Solution
Just add display:block in <label>

# Reference code is given below

label {
    display: block;  /* Add this line */
    width: 500px;
    height: 150px;
    background-color: #477a85;
    border-radius: 100px;
    position: relative;
    cursor: pointer;
    transition: 0.5s;
    box-shadow: 0 0 20px #477a8550;
  }

I've also updated my code, Please let me know if you still having any problem.

jlop • Aug 3 '21

My problem is solved , I didn't think that this was the problem , thank you so much

Clément Gaudinière • Aug 1 '21

Using labels for the switch is very clever and avoids using javascript. Thanks for your tutorial. + 1

քɦʏֆƈօ😈 • Aug 1 '21

codepen.io/MaqboolS/pen/qBrwOoG here is something I made but it is not like the toggle switch with path instead its like dark mode/ light mode switch. Hope u all find it usefull

Stanley J Nadar • Aug 1 '21

This is really good but you can also achieve the same with just input element without the label.

Overall, good technique 👍

Eric Bishard • Aug 1 '21

You should remix this tortorial or post a codepen, I'd love to see it. I also have a few variations on this same type of toggle but I have it setup as a react component.