DEV Community

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

Collapse
jlopcun profile image
jlop

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

Thread Thread
karankmr profile image
Karan Kumar Author • 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;
  }
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
jlop

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