How To Create Custom Radio Buttons using only HTML & CSS.

0
Create Custom Radio Buttons

Hello readers, I am OMBHUSAL from codewithnepal.com in Today’s blog you’ll learn How To Create Custom Radio Buttons using only HTML & CSS. Earlier I’ve shared a blog on How To Create A Glowing Bulb Effect With Switch ON/OFF using only HTML & CSS. and now it’s time to create a radio button.

A radio button or radio button is a type of spin indicator or button that allows the user to choose a single option from a list of forms. In the radio button, if an option is selected, the circle is filled to inform the user that this option is selected.

In this program [Custom Radio Buttons]

There are two options on the web page titled Games & Software. The Games option is selected by default and when you select the second option, the background colour of this option will be changed and a circle is full of animation as you can see in the image.

As you know, this is a pure CSS program that means only HTML & CSS are used to create these buttons. To make these buttons, I used HTML <input type=”radio”> and <label> tags. You can also use the radio tag only to create a custom radio button but I used a label tag to control the radio button on text or label click.

If you want to control the <input type=”radio”> with <label> then you need to pass the id name of radio tag inside for attribute of the label tag like this <input type=”radio” name=”select” id=”option-1″> and <label for=”option-1″></label>. You’re thinking about why I used the name attribute in the radio tag, if you want, the user can select only one option in a form then this name attribute value must be the same as all other radio tags.

You Might This Blog:

I hope you have understood the basic codes behind creating this program. To create these Custom Radio Buttons, I used HTML and CSS with the label.

To Create Custom Radio Buttons Follow These Steps:

Step 1

To create this program: ( Custom Radio Buttons ). Initially you need to create two files one HTML (.html) and another CSS file (.css). After creating these files, just paste the following codes into your VS IDE code sample and create an HTML file called index.html and paste the indicated codes into your HTML file (.html) Remember, you must create a file with the extension. HTML.

<!DOCTYPE html>
<!-- Created By codewithnepal.com -->
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Custom Radio Buttons | CodeWithNepal</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <div class="wrapper">
      <input type="radio" name="select" id="option-1" checked>
      <input type="radio" name="select" id="option-2">
      <label for="option-1" class="option option-1">
        <div class="dot"></div>
        <span>Games</span>
      </label>
      <label for="option-2" class="option option-2">
        <div class="dot"></div>
        <span>Software</span>
      </label>
    </div>

  </body>
</html>

Step 2

And, create a CSS file named style.css and paste the indicated codes into your CSS file. Remember, you must create a .css file.

@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap');
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}
html,body{
  display: grid;
  height: 100%;
  place-items: center;
  background: #5500ff;
}
.wrapper{
  display: inline-flex;
  background: #fff;
  height: 100px;
  width: 400px;
  align-items: center;
  justify-content: space-evenly;
  border-radius: 5px;
  padding: 20px 15px;
  box-shadow: 5px 5px 30px rgba(0,0,0,0.2);
}
.wrapper .option{
  background: #fff;
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  margin: 0 10px;
  border-radius: 5px;
  cursor: pointer;
  padding: 0 10px;
  border: 2px solid lightgrey;
  transition: all 0.3s ease;
}
.wrapper .option .dot{
  height: 20px;
  width: 20px;
  background: #d9d9d9;
  border-radius: 50%;
  position: relative;
}
.wrapper .option .dot::before{
  position: absolute;
  content: "";
  top: 4px;
  left: 4px;
  width: 12px;
  height: 12px;
  background: #0069d9;
  border-radius: 50%;
  opacity: 0;
  transform: scale(1.5);
  transition: all 0.3s ease;
}
input[type="radio"]{
  display: none;
}
#option-1:checked:checked ~ .option-1,
#option-2:checked:checked ~ .option-2{
  border-color: #007bff;
  background: #0068d9;
}
#option-1:checked:checked ~ .option-1 .dot,
#option-2:checked:checked ~ .option-2 .dot{
  background: #fff;
}
#option-1:checked:checked ~ .option-1 .dot::before,
#option-2:checked:checked ~ .option-2 .dot::before{
  opacity: 1;
  transform: scale(1);
}
.wrapper .option span{
  font-size: 20px;
  color: #808080;
}
#option-1:checked:checked ~ .option-1 span,
#option-2:checked:checked ~ .option-2 span{
  color: #fff;
}

Output of Custom Radio Buttons

Create Custom Radio Buttons

LEAVE A REPLY

Please enter your comment!
Please enter your name here