Custom Radio Buttons using only HTML & CSS
Hello readers, Today in this blog you’ll learn how to create the 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.
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 try Own with below code copy and paste it.
HTML
<!DOCTYPE html>
<!-- Created By Praveen Kumar -->
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<!-- <title>Custom Radio Buttons | VikashTech</title> -->
<link rel="stylesheet" href="blog.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>
CSS
@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;
}
- By Praveen Kumar
- January 16, 2021 3:35 pm
- 0
- Tags: beautiful radio button, radio button
Comments
Leave a Reply
Latest Posts
How to send message via Telegram Bot using PHP - Telegram API
Telegram is a great platform for chat and communication purposes. Having a large community and large user base, it is…
SuiteCRM, an open source tool for startups to use from an early stage.
When we talk about businesses in their early stage, it's quite a big deal to choose good management and sales…
How to Implement Google QAuth Authentication | Google Login - PHP MySQL
PHP Google OAuth API allows users to login into a website with their Google credentials. A user with a Google…
How to use Google Two Factor Authentication in your project?
At our end we take security at a priority, implementation of different ways to secure website should be the priority…
