How To Create Custom Radio Button Using HTML CSS

How To Create Custom Radio Button Using HTML CSS

Custom Radio Button CSS

If you want to create Custom Radio Button using HTML and CSS then this tutorial will help you completely. customize radio buttons is a common web element that is used in many different places. The input of HTML is created using type = “radio”.

 However, ordinary radio buttons cannot be used everywhere. This radio button needs to be styled to be used for various purposes. Here is a simple radio button using some CSS to make it suitable for interesting and professional use.

Custom Radio Button CSS

3 Radio buttons have been used here. These Custom Radio Buttons are made in the form of small boxes.

Many times one has to choose any one of the many options on the webpage. In that case, there is no alternative to this kind of CSS Radio Button.

See the Pen
Untitled by Shantanu Jana (@shantanu-jana)
on CodePen.

This tutorial will help you to know how to style a radio button. It is designed to be used for a professional purpose. Above is a demo that will help you figure out how it works. Here you will find the required source code and tutorials.

How to Customize radio buttons in CSS

As you can see, three boxes have been created on the webpage. Those boxes are basically radio buttons. You can select these radio buttons. By default, the middle option will be selected. 

You can also select any other option of your choice by clicking on it. It’s a little easier to build with a little bit of HTML and CSS used.

Step 1: Radio Button’s HTML code

below I put all the HTML codes together. Later I designed them with CSS. These select buttons are made in the shape of a box. This box contains some basic information.

<div class=”card”>
  <input type=”radio” name=”pricing” id=”card1″>
  <label for=”card1″>
     <h5>BASIC</h5>
     <h2>
       <span>$</span>
        15
       <span>/month</span>
    </h2>
  </label>
</div>
<div class=”card”>
   <input type=”radio” name=”pricing” id=”card2″ checked>
   <label for=”card2″>
      <h5>STANDARD</h5>
      <h2>
         <span>$</span>
          35
         <span>/month</span>
      </h2>
    </label>
</div>
<div class=”card”>
   <input type=”radio” name=”pricing” id=”card3″>
   <label for=”card3″>
      <h5>PREMIUM</h5>
      <h2>
        <span>$</span>
          120
        <span>/month</span>
      </h2>
  </label>
</div>
Radio Button's HTML code

Step 2: Design webpages with CSS

I designed the webpage using the following code. Light blue is used in the background of the webpage here.

*,
*:before,
*:after{
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}
body{
  background-color: #f5f7ff;
  font-family: ‘Poppins’,sans-serif;
  color: #2c2c51;
  height: 100vh;
  width: 100vw;
  display: flex;
  align-items: center;
  justify-content: space-around;
}
Design webpages with CSS

Step 3: Customize the Radio Button

Now the radio buttons have been shaped like a box. Those boxes have width: 200px, height: 150px, and shadow has been used around the box.

.card{
  height: 150px;
  width: 200px;
  position: relative;
}
input[type=”radio”]{
  -webkit-appearance: none;
  appearance: none;
  background-color: white;
  height: 100%;
  width: 100%;
  border-radius: 10px;
  position: absolute;
  box-shadow: 7px 7px 15px rgba(2,28,53,0.08);
  cursor: pointer;
  outline: none;
}
Customize the Radio Button

Now the button has been designed with the help of before and after.

input[type=”radio”]:before{
  content: “”;
  position: absolute;
  height: 22px;
  width: 22px;
  background-color: #f9fafd;
  border: 1px solid #e2e6f3;
  border-radius: 50%;
  top: 35px;
  right: 20px;
}
input[type=”radio”]:after{
  content: “”;
  position: absolute;
  height: 13px;
  width: 13px;
  background-color: transparent;
  border-radius: 50%;
  top: 39.5px;
  right: 24.5px;
}
Radio Button Using HTML CSS

Step 4: Design the information in the Radio Button

Now the information contained in the HTML radio button has been designed. A heading and some basic text have been added to this box.

label{
  position: absolute;
  margin: 20px;
  cursor: pointer;
}
h5{
  font-weight: 600;
  font-size: 18px;
  letter-spacing: 0.5px;
  margin: 15px 0 20px 0;
}
h2{
  font-size: 28px;
}
span{
  font-weight: 400;
  font-size: 18px;
  color: #7b7b93;
}
Custom Radio Button

Step 5: Add hover and checked effects

Now hover and click effects have been added to this design. As I said above. When you click on one of the options, you will see a border around that button. Which will help the user to understand which option is in the selected state.

input[type=”radio”]:hover{
  transform: scale(1.05);
}
input[type=”radio”]:checked{
  border: 3px solid #478bfb;
}
input[type=”radio”]:checked:after{
  background-color: #478bfb;
}
CSS Custom Radio Button

Custom Styled Radio Button (Source Code)

Checkbox or Custom Radio Button is ready for use. Now I have combined all the source codes together and given them below. 

There are many users who just want to. I have assembled all the codes for them together. So you create an HTML file and add all the following code to that file.

See the Pen
Untitled by Shantanu Jana (@shantanu-jana)
on CodePen.

Hopefully from the tutorial above you have learned how to create this customized radio button. If there is any problem then you must let me know in the comments. 

Below is a button that allows you to download the source code of the Styled Radio Button.