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:0020px#477a8550;}
I've also updated my code, Please let me know if you still having any problem.
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>
isflex-item
and default display property of flex-items aredisplay:block
. And in your case<label>
isdisplay: inline;
Solution
Just add
display:block
in<label>
# Reference code is given below
I've also updated my code, Please let me know if you still having any problem.
My problem is solved , I didn't think that this was the problem , thank you so much