Build Animated Custom Radio Buttons with This Step-by-Step Tutorial

Author - Maketechstuff
April 24, 2023
0
In this blog post, You'll learn how to create animated custom radio button using html css and simple javascript. You can create custom radio button using html and css only, But in this post, I have also shown you how you can get the value of  radio button which is checked. So for that, I have used javascript. I have also added animation to radio buttons, you can see demo in below youtube video.

These is for custom radio buttons. I have already shared blog post on creating custom checkbox and rounded checkbox. 

Radio button is use to select one option from multiple options while checkbox use to select multiple options. You can use radio button when you want your user to select only one options from many.


custom radio button


So how we going to make custom radio button?. We going to use label tag for that, and inside label tag we going to add input tag(type="radio"), div and span tag and p tag. Like this 👇.

HTML


        <label>
            <input type="radio" name="radio" class="radio" value="HTML">
            <div><span></span></div>
            <p>HTML</p>
        </label>


So,

  • Label tag is for binding (As the radio button is inside the label tag. So, When user click on label tag, radio button will checked, means click on wherever in label tag like input tag radio, p tag, div tag or span tag).
  • Input tag is for radio button. 
  • Div tag and span tag is for custom radio button. We going to style this tags as a custom radio button. When radio button checked we going to style this div and span tag.
  • P tag is for showing the user, that what value that radio button have.

Video Tutorial on Custom Radio Button:

0

Custom Radio Button.

File structure:

  1. Create one folder
  2. Open it in your code editor
  3. Create two files with name index.html and index.css


I've also used JavaScript to get the value of the selected radio button. The JavaScript is integrated within the HTML file.


Let's create animated radio buttons using HTML & CSS. And also get the value of selected radio button on click using JavaScript.


Step 1: Create basic structure and link file.

So first we'll create a basic structure of HTML and link the CSS file with the HTML file.


HTML


<!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="index.css">
</head>
<body>
    

</body>
</html>

CSS


* {
    padding: 0px;
    margin: 0px;
}


Step 2: Create a custom radio button.

Now let's create a design of a custom radio button using HTML and CSS. We going to add default radio button, div span tag and p tag inside label tag.


  • div: for custom radio button circle.
  • span tag: place inside div for dot inside a radio button.


We going to design this two tag as a custom radio button.


HTML


<!DOCTYPE html>
<html lang="en">
<!-- maketechtuff.com -->
<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 | maketechstuff.com</title>
    <link rel="stylesheet" href="index.css">
</head>

<body>

    <div class="box">
        <label>
            <input type="radio" name="radio" class="radio" value="HTML">
            <!-- custom radio button -->
            <div><span></span></div>
            <!-- radio button value, just for displaying -->
            <p>HTML</p>
        </label>
        <label>
            <input type="radio" name="radio" class="radio" value="CSS">
            <!-- custom radio button -->
            <div><span></span></div>
            <!-- radio button value, just for displaying -->
            <p>CSS</p>
        </label>
        <label>
            <input type="radio" name="radio" class="radio" value="JAVASCRIPT">
            <!-- custom radio button -->
            <div><span></span></div>
            <!-- radio button value, just for displaying -->
            <p>JAVASCRIPT</p>
        </label>
        <label>
            <input type="radio" name="radio" class="radio" value="PHP">
            <!-- custom radio button -->
            <div><span></span></div>
            <!-- radio button value, just for displaying -->
            <p>PHP</p>
        </label>
        
    </div>

</body>

</html>

CSS


* {
    padding: 0px;
    margin: 0px;
}

body {
    width: 100%;
    height: 100vh;
    background-color: black;
    display: flex;
    align-items: center;
    justify-content: center;
}

.box {
    width: 400px;
    background-color: #fff;
    border-radius: 5px;
    padding: 20px;
}

.box label {
    display: flex;
    margin: 15px 0px;
    cursor: pointer;
    align-items: center;
    padding: 10px;
    border-radius: 5px;
}

.box label:hover {
    background-color: #f4f5ff;
}

/* ---------- custom radio button ---------- */
.box label div {
    width: 35px;
    height: 35px;
    background-color: #fff;
    margin: 5px;
    border: 2px solid blue;
    box-shadow: inset 0px 0px 8px -4px rgb(0 0 255);
    border-radius: 200px;
    position: relative;
}

.box label div span {
    position: absolute;
    width: 15px;
    height: 15px;
    border-radius: 200px;
    background-color: blue;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: all 0.3s ease-in;
}

/* ---------- end of custom radio button ---------- */

.box label p {
    font-size: 20px;
    margin-left: 10px;
}


Output:


custom radio button design


As you can see in the above image that there is a default radio button and beside it there is a custom radio button. As you can see their is a dot in the middle of custom radio button that define that the radio button is checked or selected.


We'll remove that dot and add only when its default radio button is selected. Means we'll add and remove that dot according to its default radio button state.


First we'll remove the dots. by just removing the background property of the custom radio button. And also remove the box shadow from the div.


Output:


custom radio button


As we have bind the default radio button with label tag by adding default radio button inside label tag. So when a user clicks on a label tag the default radio button reacts or its state will change.


Based on that default radio button state we'll add and remove the dots in the custom radio button. I have added blue colour to custom radio buttons. You can add some other colours.


CSS


.box label input:checked + div{
    box-shadow: inset 0px 0px 8px -4px rgb(0 0 255);
}
.box label input:checked + div span{
    background-color: blue;
}

Output : 


custom radio button

As you can see when the default radio button is checked, its custom radio button gets the dot that appears like selected.


As the custom radio button works we can remove the default one.


CSS


.box label input{
    display: none;
}


Custom radio buttons are created. Now let's add animation to it by CSS keyframes.


Step 4: Add animation to custom radio buttons.

For animation, we are going to use keyframes in CSS. 


So first we'll make some changes to the span tag (which is the blue colour dot in the custom radio button).


We'll remove the margin and add top: 50%, left: 50%, transform: translate(-50%, -50%).


And we'll add animation name and animation duration to span tag when its style changes on the radio button selection. See the below code.


CSS


.box label div span{
    position: absolute;
    width: 15px;
    height: 15px;
    border-radius: 200px;
    top: 50%;
    left: 50%;
    transform: translate(-50% , -50%);
    transition: all 0.3s ease-in;
	}
	.box label input:checked + div span{
    background-color: blue;
    animation-name: radio;
    animation-duration: 0.3s;
}


Adding keyframes for animation. So, the animation is something like when the user clicks on the radio button the span tag or blue dot appears in the centre of the div tag with bounce effect. You can see the demo in the above YouTube video for better understanding.


CSS


@keyframes radio {
    25%{
        width: 10px;
        height: 5px;
    }
    50%{
        width: 10px;
        height: 5px;
    }
    75%{
        top: -10px;
        width: 10px;
        height: 15px;
    }
    100%{
        width: 10px;
        height: 15px;
    }
}

Step 5: Getting the value of the radio button.

To get the value of the radio button which is checked, we'll use JavaScript. We are going to get value on a click of a button. So let's first add one button with an onclick function declared inside HTML.


And also add one box with class="box_value" (in which we going to display value of radio buttons which is checked)


We'll add this after the label tags in HTML files.


HTML


        <button type="button" class="button" onclick="getvalue()">Submit</button>
        <div class="box_value"></div>

CSS


.box .button{
    font-size: 25px;
    background-color: blue;
    padding: 10px 20px;
    color: #fff;
    border: none;
    float: right;
    border-radius: 5px;
    cursor: pointer;
}

Output : 


custom radio button


JavaScript to get the value of the radio button which is checked.

So, to get the value we are going to use the foreach method, because we have multiple radio buttons, and on click of submit button if any radio button is checked then we show the value of that radio button in the div tag with class value box_value.


JavaScript


    let radio = document.querySelectorAll(".radio");
    let button = document.querySelector(".button");
    let box_value = document.querySelector(".box_value");

    function getvalue(){
        radio.forEach(element => {
            if(element.checked){
                box_value.innerHTML = element.value;
            }
        });
    }


Output : 


get the value of radio button


As you can see, I have selected CSS option and when click on submit button, I get the value CSS.


You may like:

  1. How to create animated radio button looks like checkbox button using HTML and CSS.
  2. How to create custom circulat checkboxes using HTML and CSS.
  3. How to create animated checkboxes using html, css and javascript.
  4. How to create a right tick animation using HTML, CSS and JavaScript.

Final code:



So that's how you can make a custom radio button and get the value of the checked radio button. If you have any question or suggestion you can write in the comment section.


Tags

You may like these posts

Show more

Post a Comment

0Comments

Share your thoughts.

Post a Comment (0)
Share to other apps
Copy Post Link
To Top