Radio Buttons are used when the user has to choose only one of the predefined choices. Sometimes to better suit the UI or theme of your website, you might want to customize the look radio buttons. However, customizing Radio Buttons is a bit tricky. We have already seen how you can style radio buttons with the help of ‘label’ elements. In today’s tutorial, we use the same concept to style the radio buttons, but this time we use icons. For today’s project, we create two radio buttons, each with an option of payment mode. Here the user has to choose between ‘Cash’ or ‘Card’ mode of payment. We style each of them as a sleek button with a subtle transition. Adding icons to the radio buttons might look somewhat tricky at first, but it is pretty simple, and we don’t need any javascript. Lets quickly dive in the tutorial.

HTML

We start by creating two radio buttons. Each radio button has the same name called ‘payment’. Each radio button should have a unique id for labels to link with labels. The ids we use here are ‘card’ and ‘cash’. Next, we create labels and use the ‘for’ attribute with the radio button ids. Thus the labels are now linked to the corresponding radio buttons. Inside label, we add icons using the font awesome icons. You can use any icon of your choice. To include the text inside the labels, we use span elements.

<input type="radio" name="payment" id="card">
<label for="card">
    <i class="fa fa-credit-card" aria-hidden="true"></i>
    <span>Card</span>
</label>
<input type="radio" name="payment" id="cash">
<label for="cash">
    <i class="fa fa-money" aria-hidden="true"></i>
    <span>Cash</span>
</label>       

CSS

Performing CSS Reset:

To begin with, We do a quick CSS reset. To get rid of the default margins and paddings, we select all the elements using the universal selector[*]. Next, We set the margin and padding attribute to 0. Also, we set the box-sizing to border-box, so we can exclude the paddings and margins from the total width of the elements. This way, we can start up clean for each project.

*,*::before,*::after{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
Styling Document Body:

For styling the document body, we set the background color to #00002a. To center and space out the radio buttons, we use the flex layout. Next, we assign dimensions covering up the entire viewport for the document body. This way, we ensure proper centering and spacing of the buttons.

body{
    background-color: #00002a;
    height: 100vh;
    width: 100vw;
    display: flex;
}
Hiding the radio button:

Next, we need to hide our original radio button. For this purpose, we make use of the ‘appearance’ attribute.

input[type="radio"]{
    -webkit-appearance: none;
}
Styling the labels:

Once the actual radio button is hidden, we can now move on to style the label element to make it look and function like a button. We start by shaping them into rectangular buttons by setting up the height and width. In the ‘unchecked’ state, the buttons should be transparent. So here, we don’t need to add any background color. We instead create a thick border with a contrasting color for each of the buttons. For round corners, we use border-radius with a value of 10 pixels.

label{
   height: 180px;
   width: 240px;
   border: 6px solid #18f98d;
   margin: auto;
   border-radius: 10px;
   position: relative;
   color: #18f98d;
   transition: 0.5s;
}
Styling the Icons:

Now to style the icons, we select using the ‘fa’ class. We set the color for the icons to ‘#18f98d’ and font size to 80 pixels. Using the transforms, we center the icons inside the buttons created using labels. Here, note that the position attribute should be set to absolute for the centering to work correctly.

.fa {
    font-size: 80px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -80%); 
}
Styling The Text:

Using a similar method, we center the text inside the buttons. The font we have used here is ‘Poppins’. To make the text a little bold, we use font-weight of ‘500’. At this point, we are already done with styling.

label>span {
    font-size: 25px;
    font-family: "Poppins", sans-serif;
    font-weight: 500;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, 80%);
}
Adding Transitions:

At this point, we are already done with styling. Lastly, we need to add transitions when the user clicks the button, or in other words, you can say when the radio button is in ‘checked’ state. To achieve this, we target the labels of checked radio buttons using a combination of adjacent sibling selector[+] and ‘: checked’ pseudo-class. When the user clicks on the label, the radio button placed immediately before the label (adjacent sibling) gets selected. The background color gets changed to a highlighting color. Also, the text and icon color is changed to white for readability. Finally, we add some box-shadow to show some glow around for the selected button.

input[type="radio"]:checked + label {
	background-color: #18f98d;
	color: #ffffff;
	box-shadow: 0 15px 45px rgb(24,249,141,0.2);
}

Did you like this little trick for customizing radio buttons? Do leave your comments and suggestions below. Also, you can subscribe to my Youtube or follow me on Instagram to stay updated with the latest tutorials.