Custom Radio Button | Custom Radio Button using html css

 Custom Radio Button | Custom Radio Button using Html css







Welcome🎉 to Code With Random blog. In this blog, we learn that how we how to create Custom Radio Button. We use HTML & CSS  for this Custom Radio Button. Hope you enjoy our blog so let's start with a basic HTML structure for Custom Radio Button.

HTML code for Custom Radio Button

 <!DOCTYPE html>  
 <html lang="en">  
 <head>  
   <meta charset="UTF-8">  
   <meta http-equiv="X-UA-Compatible" content="IE=edge">  
   <meta name="viewport" content="width=device-width, initial-scale=1.0">  
   <title>Custom Radio Button</title>  
   <link rel="stylesheet" href="style.css">  
 </head>  
 <body>  
   <div class="container">  
     <p>Select Gender:-</p>  
     <div class="btn">  
       <input type="radio" name="gender" id="Male">  
       <label for="Male">Male</label>  
     </div>  
     <div class="btn">  
       <input type="radio" name="gender" id="Female">   
       <label for="Female">Female</label>  
     </div>  
   </div>  
 </body>  
 </html>  
There is all HTML code for the Custom Radio Button. Now, you can see output without CSS, then we write CSS for our Custom Radio Button.

OutPut
 @import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');  
 *{  
   margin: 0;  
   padding: 0;  
   box-sizing: border-box;  
   font-family: 'Poppins', sans-serif;  
 }  
 body{  
   display: flex;  
   justify-content: center;  
   align-items: center;  
   height: 100vh;  
 }  
 .btn{  
   width: 100px;  
   height: 40px;  
   display: flex;  
   align-items: center;  
   margin-top: 1.2em;  
   padding: 0 0.5em;  
 }  
 .btn input{  
   position: relative;  
   cursor: pointer;  
   appearance: none;  
   -webkit-appearance: none;  
 }  
 .btn input::before,  
 .btn input::after{  
   content: '';  
   position: absolute;  
   width: 5px;  
   height: 5px;  
   border-radius: 50px;  
 }  
 .btn input:checked::before{  
   background: #ca4444;  
   transform: translate(-50%,-50%);  
 }  
 .btn input::after{  
   width: 10px;  
   height: 10px;  
   background: none;  
   border: 2px solid black;  
   border-radius: 50px;  
   transform: translate(-80%, -50%);  
   transition: all .4s;  
 }  
 .btn input:checked::after{  
   width: 100px;  
   height: 40px;  
   border-radius: 10px;  
   transform: translate(-15%, -50%);  
   z-index: 10;  
 }  
 .btn label{  
   margin-left: 0.5em;  
   cursor: pointer;  
 }  

Now we have completed our CSS section,  Here is our updated output CSS.

OutPut

Check it more








Now we have completed our CSS section,  Here is our updated output with  CSSHope you like Custom Radio Button, you can see output video and project screenshots. See our other blogs and gain knowledge in front-end development. Thank you 🙏💕

In this post, we learn how to create a Custom Radio Button using simple HTML & CSS. If we made a mistake or any confusion, please drop a comment to reply or help you in easy learning.

Written by - Code With Random/Anki 

Post a Comment

Previous Post Next Post