Let’s face it, at some point you look at a radio or a checkbox button and you’re like… this looks like something that starts with an “s” and ends with a “hit”. I’m here to stop you from saying that word and go on with your life without worrying about those ugly things.

We’re just going to use code here. No images, just pure scalable user interface using code. Cool, eh? Let’s get started.

Let’s create our code structure first.

<!-- Radio --> 
<label>
<input type="radio">
<span>I'm a radio button</span>
</label>
<!-- Checkbox -->
<label>
<input type="checkbox">
<span>I'm a checkbox</span>
</label>

If it looks ugly, don’t be alarmed. That’s normal for an untamed code from the wild. All you gotta do now is to tame it with our very best tool, CSS.

First thing you have to do is to hide the element that generates the hideous button, which is… DUN DUN DUN… the input tag. Don’t worry, we can still trigger it even though it’s hidden. How? by nesting it inside the label tag.

Now that the default toggles are gone, we need to create our fake —but amazing— toggles.

#css