Radio Buttons With Icon | CSS Tutorial

<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>       

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);
}