Transform your radio buttons to look like sleek, animated checkboxes! This blog post dives deep into HTML and CSS, revealing the secrets to crafting stunning checkbox-style radio buttons that enhance user experience and boost your website's visual appeal. Learn the techniques, explore animation options, and impress your audience with interactive forms that stand out.
You’ll learn in this blog:
- How to create a custom radio button.
- How to create a radio buttons to look like a checkbox.
- How to create animated custom radio buttons.
- Checkmark animation.
Video Tutorial on Custom Animated Radio Buttons.
Custom Animated Radio Buttons
File structure:
- Create one folder.
- Open it in your code editor.
- Create two files in that folder with name and extension index.html and index.css.
Steps to create custom animated radio button that looks like checkboxes.
Step 1 : Create design for custom radio buttons.
We start by wrapping everything in a <label> tag. This allows us to capture clicks and control the button's visibility with ease.
Within the label, we'll create a <div> for the radio button's square base and a <p> to display the user-friendly text associated with it. Inside the square div, we'll use additional tags to build the animated checkmark itself. You can simply use images also.
Now comes the fun part – styling! We'll leverage CSS to customise the look and feel of both the square base and the animated checkmark.
HTML
<!DOCTYPE html>
<html lang="en">
<!-- maketechstuff.com -->
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Custom Animated Radio Button | maketechstuff.com</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<div class="container">
<h2>Custom Radio Buttons</h2>
<label>
<input type="radio" name="fruits" value="Mango">
<!-- Square for custom radio button -->
<div class="square">
<!-- Checkmark for custom radio button -->
<!-- You can simply use image also -->
<div class="custom_radio_button">
<div class="line1"></div>
<div class="line2"></div>
</div>
</div>
<p>Mango</p>
</label>
<label>
<input type="radio" name="fruits" value="Banana">
<!-- Square for custom radio button -->
<div class="square">
<!-- Checkmark for custom radio button -->
<!-- You can simply use image also -->
<div class="custom_radio_button">
<div class="line1"></div>
<div class="line2"></div>
</div>
</div>
<p>Banana</p>
</label>
<label>
<input type="radio" name="fruits" value="Apple">
<!-- Square for custom radio button -->
<div class="square">
<!-- Checkmark for custom radio button -->
<!-- You can simply use image also -->
<div class="custom_radio_button">
<div class="line1"></div>
<div class="line2"></div>
</div>
</div>
<p>Apple</p>
</label>
<label>
<input type="radio" name="fruits" value="Grapes">
<!-- Square for custom radio button -->
<div class="square">
<!-- Checkmark for custom radio button -->
<!-- You can simply use image also -->
<div class="custom_radio_button">
<div class="line1"></div>
<div class="line2"></div>
</div>
</div>
<p>Grapes</p>
</label>
</div>
</body>
</html>
CSS
* {
padding: 0px;
margin: 0px;
}
body {
width: 100%;
height: 100vh;
background-color: #2196F3;
}
.container {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 450px;
background-color: #fff;
padding: 20px;
border-radius: 5px;
}
h2 {
font-size: 40px;
text-align: center;
margin-top: 10px;
margin-bottom: 50px;
}
label {
display: flex;
align-items: center;
margin: 25px 0px;
padding: 10px;
border-radius: 10px;
cursor: pointer;
transition: 0.3s;
}
label:hover {
background-color: #f2f2f2;
}
/* square for custom radio button */
.square {
width: 40px;
height: 40px;
background-color: transparent;
border: 2px solid #e9e9e9;
border-radius: 10px;
position: relative;
}
/* Checkmark for custom radio button */
.custom_radio_button {
position: absolute;
width: 30px;
height: 15px;
top: 9px;
left: 6px;
rotate: -45deg;
}
.line1 {
position: absolute;
left: 0px;
width: 6px;
height: 100%;
background-color: blue;
border-radius: 100px;
transition: 0.2s;
transition-delay: 0.2s;
}
.line2 {
position: absolute;
left: 0px;
bottom: 0%;
width: 100%;
height: 6px;
background-color: blue;
border-radius: 100px;
transition: 0.2s;
transition-delay: unset;
}
/* Text */
label p {
font-size: 30px;
margin-left: 15px;
}
Output:
We've successfully designed a custom radio button! The default radio button remains visible for now, but it will be hidden once custom radio button functional(select and unselect according to its default radio button).
The next step is to control the visibility of the checkmark. We want it to show only when its default radio button is selected.
Since the checkmark itself is constructed with HTML, we'll strategically hide it for now. This allows us to reveal it later in a animation. Check out the highlighted code below for the invisibility trick:
CSS
.line1 {
position: absolute;
left: 0px;
width: 6px;
height: 0%;
background-color: blue;
border-radius: 100px;
transition: 0.2s;
transition-delay: 0.2s;
}
.line2 {
position: absolute;
left: 0px;
bottom: 0%;
width: 0%;
height: 6px;
background-color: blue;
border-radius: 100px;
transition: 0.2s;
transition-delay: unset;
}
Output:
The final touch. We'll use CSS dynamically to check the radio button state and based on that state we are going to change the styling of the checkmark or show the checkmark.
Step 2: Make custom radio button functional according to its default radio button state.
Now that we have the visual design of our custom radio button, let's add some functionality! We'll make the checkmark appear or disappear based on the default radio button's state.
You can easily achieve this with CSS! We can use the :checked pseudo-class to target the radio button when it's selected and apply specific styles accordingly to the checkmark (class .lines1 and .lines2).
See below code:
CSS
input[type="radio"]:checked+.square .custom_radio_button .line1 {
height: 100%;
transition-delay: unset;
}
input[type="radio"]:checked+.square .custom_radio_button .line2 {
width: 100%;
transition-delay: 0.2s;
}
Output:
The custom radio button is now functional! Notice the smooth animation in the checkmark, powered by the transition and transition-delay CSS properties. You can explore the CSS code for the element's properties in .lines1 and .line2, both before and after the radio button is selected.
Step 3: Hide default radio buttons.
Since we're using a label, when user click on label its radio button will react, So, it's alright to hide the default radio button and it's still be functional.
CSS
input[type="radio"]{
display: none;
}
Output:
You may like:
- How to create an animated radio button using HTML CSS and JavaScript.
- How to get the value of selected radio button using JavaScript.
- How to create create a function to select and unselect all checkboxes using JavaScript.
- How to create a custom choose file (input="type") button using HTML and CSS.
- How to create a checkmark animation using HTML, CSS and JavaScript.
Final code:
So that's, You've created mesmerising custom animated radio buttons that look like checkboxes, using HTML and CSS. If you have any questions or suggestions, leave them in the comments below!
Thanks for reading.
Share your thoughts.