Hello there. I hope that all is going great with you. In this post, you will learn how to create a Toggle Button using HTML, CSS, and JavaScript. I recently designed an adorable shape Toggle Button that you may find appealing; today’s button is simple yet effective.
Toggle buttons can be added to any webpage or application to enable or disable specific aspects. For instance, to turn on Wi-Fi, you would use this type of button. They are helpful on various pages in software programs and other front-end components for similar purposes.
Please look at the image of our toggle button I posted online. As shown, one toggle button is closed while its counterpart opens up, but in reality, there is only one toggle button that we must click to open or close; only its circular part moves.
I believe you can quickly design this toggle button using HTML, CSS, and JavaScript. If you’re having difficulty creating an easy toggle switch, here is the complete source code;
Check out this:
- Login/Registration Form in HTML, CSS and JavaScript
- Testimonial Slider in HTML CSS & Js | SwiperJS
- Cookie Consent Box for HTML CSS and JavaScript
- Glassmorphism Login Form in HTML and CSS
Hamburger Menu Button that Has Loading Animation
Switch Button [Source Code] and Toggle Button (Source Code).
To create an animated Button using HTML, CSS, and JavaScript code, it’s necessary to create two separate files—one HTML and the other CSS. Once these have been made, copy-paste their contents into your document before downloading them in their entirety by clicking the Download Button.
<!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>Toggle Button Animation</title>
<!-- CSS -->
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div></div>
<!-- JavaScript -->
<script>
const toggleBtn = document.querySelector(".toggle");
toggleBtn.addEventListener("click", () => toggleBtn.classList.toggle("active"));
</script>
</body>
</html>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background: #7d2ae8;
}
.toggle{
position: relative;
height: 12px;
width: 125px;
cursor: pointer;
border-radius: 25px;
background-color: #fff;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
}
.toggle::before{
content: "";
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
height: 50px;
width: 50px;
border-radius: 50%;
background-color: #7d2ae8;
border: 10px solid #fff;
transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
}
.toggle.active::before{
left: calc(100% - 70px);
background-color: #fff;
border-color: #7d2ae8;
}
