Custom Radio Button Style Using HTML and CSS

Custom Radio Button Style Using HTML and CSS

Custom Radio Button Style Using HTML and CSS

Custom Radio Button Style Using HTML and CSS
Custom Radio Button Style Using HTML and CSS

 

Welcome to the Codewithrandom blog. In this blog, we learn how to create Custom Radio Button Styling. We use HTML and CSS  for this Custom Radio Button. I 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 the HTML Code for the Custom Radio Button. Now, you can see output without Css Code. then we write Css Code for Styling Custom Radio Button.

50+ HTML, CSS & JavaScript Projects With Source Code

Only Html Code Output

Custom Radio Button Style Using HTML and CSS
Custom Radio Button Style Using HTML and CSS

 

 

CSS Code for Custom Radio Button

@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;
}

100+ JavaScript Projects With Source Code ( Beginners to Advanced)

we have completed our Css Code Section For styling Radio Button. Here is our updated output HTML + CSS.

Final Output Of Radio Button

Custom Radio Button Style Using HTML and CSS
Custom Radio Button Style Using HTML and CSS

 

Custom Radio Button Style Using HTML and CSS
Custom Radio Button Style Using HTML and CSS

 

Live Preview Of Custom Radio Button Style Using HTML & CSS


Github link of this project

10+ Javascript Projects For Beginners With Source Code

Now we have completed our Custom Radio Button. Here is our updated output with HTML and CSS. Hope you like Custom Radio Button Styling. you can see the 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 HTML and 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 



Leave a Reply