In this article you'll learn how to make toggle button or toggle switch using HTML & CSS. You may have seen toggle button especially in settings to make something turn ON or OFF. We going to make it using checkbox. You can say that we are designing the checkbox.
Its easy to make it, just add input tag with type checkbox (type = "checkbox") and bind it to the label tag (so when you click on label tag it is equal to click on that input tag which is bounded).
For example, if their is input tag with type checkbox and it is bounded to label tag (Just add id attribute to input tag and add value to it and add for attribute to label tag and add the same value to it as in id of input tag. that's how you bind it.) so, when you click on that label tag, then the checkbox of that input tag which bounded to that label is checked, even if that input tag is set to display: none.
Video Tutorial on Toggle Button:
Toggle Button
So before starting here the basic explanation of binding label tag and input tag. To bind the input tag with label tag if input tag is not in label tag, you can add for attribute and add same value as input tag id has. And also, you can bind input tag with label tag by adding input tag inside the label tag. Below is example:
HTML
/* -------binding input tag with label (for example)------- */
/* -------label and input tag is bound------- */
<label for="check"></label>
<input type="checkbox" id="check">
/* -------label and input tag is bound------- */
<label>
<input type="checkbox">
</label>
So, first of all I created two files index.html and index.css. then linked the index.css to index.html file. Below are the steps that I created for you to make toggle button using html and css.
Step 1: Create basic structure of html and add box and input tag.
Created full width box and added one checkbox inside it with id value check. Here attribute id used, because we have to bind this input tag to label tag.
Also read: Create a custom checkboxes using HTML & CSS.
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">
</div>
</body>
</html>
CSS
*{
padding: 0;
margin: 0;
}
.container{
width: 100%;
height: 100vh;
background-color: #fff;
display: flex;
align-items: center;
justify-content: center;
}
Output :
Step 2: Create a toggle switch design.
Now let's add label tag to make the design of toggle switch and bind the input tag with label (I placed label tag below the input tag checkbox). I've shown you how you can bind input tag with label.
Now after binding, when user click on the label tag, the checkbox will check and if checked then it will be unchecked.
HTML
<div class="container">
<input type="checkbox" id="check">
<label for="check" class="button"></label>
</div>
CSS
.button{
background-color: #d2d2d2;
width: 200px;
height: 100px;
border-radius: 200px;
cursor: pointer;
position: relative;
transition: 0.2s;
}
.button::before{
position: absolute;
content: '';
background-color: #fff;
width: 90px;
height: 90px;
border-radius: 200px;
margin: 5px;
transition: 0.2s;
}
Output :
Step 3: Add functionality to toggle switch to ON & OFF.
Now the label tag and input tag are bounded. Now we'll add css to slide the button to right and change the color when checkbox is checked and slide left and back to previous color when checkbox is unchecked.
CSS
input:checked + .button{
background-color: #20096d;
}
input:checked + .button::before{
transform: translateX(100px);
}
Output :
Step 4: Remove input tag.
Now as the input tag is bounded with label tag and toggle switch is working. Its ok to hide the checkbox. Let's hide the checkbox with css property display: none.
CSS
input{
display: none;
}
Output :
That's it, you can see demo in above youtube video.
You may like:
- How to create an animated toggle button using HTML & CSS.
- How to create toggle button with image inside using HTML, CSS and JavaScript.
- How to change stylings based on toggle switch states.
- How to design checkbox to circular form using HTML & CSS.
- How to select and unselect all checkboxes using JavaScript.
- How to select checkbox when click on text.
- Show and hide password based on checkbox state.
- How to get value of selected checkboxes using JavaScript.
Final code :
So that's how you make simple toggle button using HTML and CSS. If you have any query or suggestion, feel free to write them in the comment section.
Share your thoughts.