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.
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:
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.
You could use EM units instead of PX! :) Then change the container's font-size to adapt the switch's size.
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:
Cheers
yes! this is much better.