Custom Radio Buttons using HTML CSS

Custom Radio Buttons using only HTML & CSS

A radio button or option button is one type of selection indicator or button that allows the user to choose only one option in a form list. In the radio button, if an option is selected, the circle is filled to inform the user, that option is selected.

Some Related Posts:-

In this program [Custom Radio Buttons], there are two options on the webpage labeled as Student and Teacher. The student option is selected by default and when you select the second option, the background color of this option will be changed and a circle is filled with animation as you can see in the image. If you’re feeling difficult to understand what I am saying. You can watch a full video tutorial on this program [Custom Radio Buttons].

See also  Hamburger Bun Menu Using CSS

Custom Radio Buttons or Option Buttons [Source Cods]

To create this program (Custom Radio Buttons). First, you need to create two Files one HTML File and another one is CSS File. After creating these files just paste the following codes in your file.

First, create an HTML file with the name of index.html and paste the given codes in your HTML file. Remember, you’ve to create a file with .html extension.

<!DOCTYPE html>
<!-- Created By codeithub-->
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Custom Radio Buttons | codeithub</title>
    <link rel="stylesheet" href="https://www.codeithub.com/custom-radio-buttons-html-css/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>Student</span>
      </label>
      <label for="option-2" class="option option-2">
        <div class="dot"></div>
        <span>Teacher</span>
      </label>
    </div>

  </body>
</html>

Second, create a CSS file with the name of style.css and paste the given codes in your CSS file. Remember, you’ve to create a file with .css extension.

@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: #0069d9;
}
.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: #0069d9;
  background: #0069d9;
}
#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;
}

That’s all, now you’ve successfully created Custom Radio Buttons using only HTML & CSS. If your code doesn’t work or you’ve faced any errors/problems then please comment down or contact us from the contact page.

See also  Cycle movement animation using HTML and CSS

Leave a Reply