HTML
Let’s start with a simple HTML. Nothing fancy we need here.
CSS
To give those input radio buttons a switch appearance, we need to have those elements next to each other. For that we can use multiple ways for e.g. making the container a flex or a grid or just set the margin 0.
We’ll go with a flex option.
Also, we’ll remove the original radio button and convert the labels into our switch. Let’s remove the radio buttons first. We can just set the height and width to 0.
Even after that, we’ll see two small dot of radio buttons. We’ll remove those by setting the position property of those radio buttons as an absolute and clipping it afterwards.
Just like this:
Let’s make the switch now by applying some basic styles to the labels.
We still need style when the input radio button is selected. Let’s add that now.
Looks nice. Let’s carve out the corners of those labels to make it look nice. We can target those labels by adding ID or class or simply just by first-of-type and last-of-type.
Just like this:
buttons radio style switch toggle
