In this article you'll learn how to make a toggle button which has an image inside it using HTML, CSS and JavaScript. I have already shared a blog post on simple toggle button and animated toggle button. In this post we’ll make a toggle button that changes the image when it switches.
Background Image Credit :
Light icons created by Freepik - FlaticonDark icons created by Freepik - Flaticon
You may have seen the toggle button in many websites. It's mostly used to make something on or off. You can use it to toggle dark and light mode, Switch on or off to autosave functionality on your software, etc.
Video Tutorial on Toggle Button With Image/Icon Inside Using HTML, CSS and JavaScript.
Toggle Switch.
The toggle button that we are going to make initially has a different image or icon inside it and when the user clicks on it to switch it ON the image present inside will change.
And when the user again clicks on the toggle button to switch it OFF , the image inside it will change back to the previous image. You can see the demo in the above YouTube video tutorial.
I have made the button a light and dark mode toggle button. So I have used the image accordingly on its ON and OFF state.
File structure:
- Create one folder.
- Open it in you code editor.
- Create two files inside that folder with name index.html and index.css.
I've integrated JavaScript within the HTML file.
Let's create create toggle button that change image on it switch using HTML, CSS and JavaScript.
Step 1: Create files and make basic structure.
Create a basic html structure and link the css file with html the 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>Document</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
</body>
<script>
</script>
</html>
CSS
*{
padding: 0;
margin: 0;
font-family: sans-serif;
}
body{
width: 100%;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
Step 2: Create a toggle button.
Now let’s create a toggle button with some text ('dark and light mode').
I have used a label tag. We are going to design a label tag as a toggle button. And bound the checkbox with a label tag.
As we bound the checkbox with a label tag. So, when a user clicks on a label tag, the checkbox will react (it will be checked and if checked then it will be unchecked). See the below code.
I have also added a span tag for the sliding ball that slides inside the button. And inside it an img tag is added for inserting images. Later we’ll change the image according to the checkbox state with JavaScript.
Based on the checkbox state (check and uncheck) we'll slide the span tag. If checkbox checked, we slide the ball (span tag) to right in button (label tag) and if checkbox uncheck we slide the ball to left side in button.
HTML
<div class="container">
<div class="text">Dark & Light Mode</div>
<label for="check" class="button">
<input type="checkbox" id="check">
<span class="span">
<img src="image/brightness.png" class="img">
</span>
</label>
</div>
CSS
.container{
width: 600px;
background-color: #f2f2f2;
padding: 15px 25px;
border-radius: 25px;
display: flex;
justify-content: space-between;
place-items: center;
}
.container .text{
font-size: 30px;
color: #000;
font-weight: bold;
}
.button{
background: linear-gradient(90deg, rgb(200 150 255), rgb(25, 50, 255));
width: 200px;
height: 100px;
border-radius: 200px;
cursor: pointer;
position: relative;
display: inline-block;
transition: 0.2s;
}
.span{
position: absolute;
background-color: #fff;
width: 90px;
height: 90px;
border-radius: 200px;
margin: 5px;
transition: all 0.2s ease-out;
}
img{
position: absolute;
width: 50px;
height: 50px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
As we bound the checkbox with the label so it's ok to hide the checkbox and it is still functional when the user clicks on the label tag.
CSS
input{
display: none;
}
Output:
Step 3: Add JavaScript for functionality.
Let’s add a sliding button and image changing functionality to the toggle button using JavaScript.
So, we are going to add an on click (OnClick) event to the label (class=”button”). When user click on label and if checkbox is checked then:
- We change the slider (span tag) left position to left=”100px” so that it slides to right.
- Change the background colour of the label (class=”button”).
- Change the image, Here I have made light and dark mode toggle button design so I added an image according to it.
And if checkbox is unchecked then:
- We change the slider left position(left=”0px”) so that it slides to left
- Change the background colour of the label.
- Change the image which you want to show when the switch is off.
JavaScript
let input = document.getElementById("check");
let img = document.querySelector(".img");
let span = document.querySelector(".span");
let button = document.querySelector(".button");
button.onclick = function(){
if(input.checked){
span.style.left = "100px";
button.style.background = "#000";
img.src = "image/night-mode.png";
}else{
span.style.left = "0px";
button.style.background = "linear-gradient(90deg, rgb(200 150 255), rgb(25, 50, 255))";
img.src = "image/brightness.png";
}
}
Output :
That’s it. You can see demo in above YouTube video.
You may like:
- How to create simple toggle button using html and css.
- How to create animated toggle button using only html and css.
- How to create light and dark toggle switch using HTML and CSS.
- How to create glowing toggle button using html and css.
- How to change styling according to toggle button state using html, css and JavaScript.
- How to create website landing page with light and dark mode using html, css and JavaScript.
Final code:
So that’s how you can make a toggle button with images inside it. That changes the image when toggle button on or off. If you have any questions or suggestions you can write in the comment section.
Share your thoughts.