In this article you'll learn how to make animated toggle button using HTML and CSS. You can say in this post we going to make custom checkbox. I have already shared post on simple toggle button.
Toggle button is a button or you can say switch, to make something on or off and their is many other ways you can use it.
In this article we going to make animated toggle button, which slide with some smooth effect. we'll add animation with CSS keyframes.
Video Tutorial of Animated Toggle Button:
In this toggle button I have used:
- Label tag (To bind checkbox).
- Input tag with type checkbox (when checkbox is checked then we change the button styles to slide to right and if checkbox is unchecked then we make this button off means slide to left).
- keyframes for animation.
So, let's start making animated toggle buttons.
Animated Toggle Button.
Step 1: Create basic structure.
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>Document</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<div class="container">
<input type="checkbox" id="check">
<label for="" class="button"></label>
</div>
</body>
</html>
CSS
*{
padding: 0;
margin: 0;
}
.container{
width: 100%;
height: 100vh;
background-color: #f1eaff;
display: flex;
align-items: center;
justify-content: center;
}
.button{
width: 200px;
height: 100px;
background-color: #d2d2d2;
border-radius: 200px;
cursor: pointer;
position: relative;
transition: 0.2s;
}
Output :
HTML
<div class="container">
<input type="checkbox" id="check">
<label for="check" class="button"></label>
</div>
So now when a user clicks on a label tag (class="button") it's equal to click on checkbox means checkbox works even when the user clicks on the label tag.
As you can see in the above image, we have created a toggle button, but we have to add a circle inside to slide left and right.
So let's add a circle inside the button (class="button").
To make it, we'll use ::before selector in CSS to label tag (class="button").
CSS
.button::before{
position: absolute;
content: "";
width: 90px;
height: 90px;
background-color: #fff;
border-radius: 200px;
margin: 5px;
transition: 0.2s;
}
Output :
As you can see circle successfully inserted inside toggle button (label tag).
Step 3: Adding functionality to slide the button.
As we have bind checkbox with label tag. So when a user clicks on a label tag, a checkbox state changes. And based on the checkbox state we'll slide the circle (button::before).
If checked or selected we'll slide it to right and change the background colour of the button to blue.
And if unchecked or unselected we'll slide it to the left.
Also read: Sliding login and registration form using HTML, CSS and JavaScript.
CSS
input:checked + .button{
background-color: blue;
}
input:checked + .button::before{
transform: translateX(100px);
}
Output :
When clicking on it.
Now the toggle button is working, now let's hide the checkbox.
CSS
input{
display: none;
}
Now toggle button is ready, now let's give sliding animation to it.
Step 4: Adding animation to toggle button using CSS keyframes.
So, we have to give the animation to the circle (button::before). So first let's give the name of animation (toggle), animation-duration: 0.8s (means in 0.8s animation will be completed). And transition-delay: 0.2s to the button::before to slide.
CSS
input:checked + .button::before{
transform: translateX(100px);
animation-name: toggle;
animation-duration: 0.8s;
transition-delay: 0.2s;
}
Adding keyframes for toggle button animation.
I have added toggle in below css, it's because I have given animation-name toggle in above css code.
We'll add an animation to the circle that when animation completes 0% then 0% code will run, when 25% animation completed then 25% css code will run like wise it will go to 100%.
This percentage is based on animation duration that we set 0.8s. Means the total animation duration is 0.8s so from 0.8s if 0% animation complete then 0% code will run like wise so on.
CSS
@keyframes toggle{
0%{
width: 90px;
height: 90px;
}
25%{
margin: 10px;
width: 30px;
height: 80px;
}
50%{
margin: 20px;
width: 100px;
height: 60px;
}
75%{
margin: 5px;
width: 70px;
height: 90px;
}
100%{
width: 90px;
height: 90px;
}
}
You can see demo in above YouTube video.
You may like:
- How to create a simple toggle button with HTML and CSS.
- How to change styling of any HTML element using toggle button.
- How to create an glowing toggle button using HTML and CSS.
- How to create toggle button with images using HTML, CSS and JavaScript.
- How to create a web page with light and dark mode that change modes with a toggle button using HTML , CSS & JavaScript.
Final code :
So that's how you can create animated toggle button using HTML and CSS. If you have any question or suggestion you can write them in the comment section.
Share your thoughts.