In this article you'll learn how to make glowing toggle button using only HTML and CSS.
Toggle buttons are a type of user interface element that allows users to switch between two states, such as ON and OFF. They are often used to control settings, such as whether feature is enabled or not, or to display different pieces of content, etc...
To make this toggle button we going to make it through checkbox. When checkbox checked then we make toggle button turn on (Make it glow and slide the ball to right.) else we make toggle button turn off (Make it slide the ball to left and remove glow effect).
Video Tutorial for Glowing Toggle Button.
Glowing Toggle Button.
When the toggle button switches ON the circle or ball that moves left to right will move to right and glow. When the toggle button switches OFF it back to the left side and the glowing effect will be removed.
File structure:
- Create one folder.
- Open that folder in your code editor.
- Create two files in that folder with name index.html and index.css
Let's create the glowing toggle button step by step using HTML and CSS.
Step 1: Create basic html structure.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Toggle Button</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
</body>
</html>
CSS
*{
padding: 0;
margin: 0;
font-family: sans-serif;
}
body{
width: 100%;
height: 100vh;
background-color: #4e4e4e;
display: flex;
align-items: center;
justify-content: center;
}
Output:
Step 2: Create simple toggle button.
Now let's create simple toggle button.
To make it I have added:
- Div tag with class container (class="container") is for box for toggle button.
- Label tag is for toggle button.
- Input type checkbox for checkbox. I have added it inside label tag so that when user click on label, the checkbox state change because it's bound by label tag (as its inside it).
- Div tag with class moving_circle is for circle that slide left and right in toggle button (label tag).
HTML
<div class="container">
<label>
<input type="checkbox">
<div class="moving_circle"></div>
</label>
</div>
CSS
label{
width: 200px;
height: 100px;
display: block;
background-color: #000;
border-radius: 100px;
cursor: pointer;
position: relative;
}
input[type="checkbox"]{
display: none;
}
.moving_circle{
position: absolute;
left: 0px;
width: 90px;
height: 90px;
background-color: #fff;
border-radius: 100px;
margin: 5px;
transition: 0.2s;
}
Output:
Here the simple toggle button design is ready. Now let's add some functionality to switch it ON or OFF (slide circle left and right) based on the default checkbox state.
Step 3: Create a functionality of toggle button along with a glowing effect.
In the previous step we make the design. Now we'll add simple functionality to slide that circle (class="moving_circle") according to checkbox state (checked or unchecked).
When checkbox checked we move circle to right else left. and also add glowing effects to circle (class="moving_circle") when checkbox checked.
To make Glowing effect on toggle button I have just used box-shadow property of CSS. See below css code.
CSS
input[type="checkbox"]:checked + .moving_circle{
transform: translateX(100px);
box-shadow: 0px 0px 40px 20px #fff;
}
Output:
After click
So glowing toggle button is ready using HTML and CSS. You can see demo in above YouTube video.
You may like:
- How to create a simple html and css toggle button.
- How to create a animated toggle button with only HTML & CSS.
- How to create a JavaScript toggle button.
- How to change background color based on toggle button state using HTML, CSS and JavaScript.
- How to create a toggle button with image. That change on switch toggle button.
Final code for glowing toggle button:
So that’s how you can make glowing toggle button using HTML and CSS. If you have any query or suggestions you can write in the comment section.
Share your thoughts.