DEV Community

Discussion on: How to create a custom Toggle Switch using CSS

karankumarjs profile image
Karan Kumar Author • Edited on

First of all, Thankyou for encountering this problem!

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;

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;
Enter fullscreen mode Exit fullscreen mode

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

Thread Thread
jlopcun profile image

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