Learn how to Create Custom Radio Button Using HTMl CSS and JavaScript || How To Create a customized Radio Button -Umesh Radadiya WEB

Hey Guys welcome to another Blog. We are going to learn How to Create a Custom Radio Button Using HTML CSS and JavaScript. I am Radadiya Umesh And I have given the codes as well as a Downloadable File Also. So if you want to directly copy paste the code then you can also do it. And If you want to Download the File then You have to Simply click on the download button given below. So Let's Get Started

What Is Radio Button

In Simple Language the Radio Button Is the Button where users can select only one button from Multiple buttons. That means It can be Used at multiple Choice Questions and Many more things. In short If you want to take the only one answer from the user like Yes or No,True or False,etc.

The Above image is the Output of the Radio Button We Are Going To create

How to create A Radio Button

It's very easy to create a Radio Button. If you are a Web Developer then anytime you can get the work to create a full customized Radio Button then you don't have to do Anything just Copy the Codes Below then Paste it to your Code Editor. Done that's all it is very Easy to Create a Custom Radio Button.

Where Radio Buttons can be Used

Generally The Radio Buttons is used in the forms where users can fill the required Details,In the Multiple Choice Question Answers Website ,For Taking Gender as Male Female and Other option,etc. So These are the basic details where can be the radio buttons used. HTML Code:

Copy Code To Clipboard | CodingLab

HTML Code:

                <!DOCTYPE html>
        <!-- Created By aayush Pathak Blogs -->
        <html lang="en" dir="ltr">
          <head>
            <meta charset="utf-8">
            <title>Custom Radio Buttons | Aayush Pathak Blogs</title>
          </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>Billionare</span>
            </label>
            <label for="option-2" class="option option-2">
              <div class="dot"></div>
              <span>Beggar</span>
            </label>
          </div>
      
        </body>
      </html>

CSS Code:

                @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: #d90091;
        }
        .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: #d90091;
          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: #d90091;
          background: #d90091;
        }
        #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 this is so easy to create the radio button If you liked Our Content then Please Share and Support Us guys.

Search This Blog

c programming , javascript , css and html

Learn how to Create Custom Radio Button Using HTMl CSS and JavaScript || How To Create a customized Radio Button -Umesh Radadiya WEB

Comments

Post a Comment

Popular posts from this blog

form in class

SIDDHARTH

form_newlog