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;
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.
HTML File
<!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>
CSS File
*{
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;
}
Want to Check Username Availability on Social Media?If you’re looking to check username availability on various social media platforms, visit NameChkr to find out!
Read Also
Read Also
- Glassmorphism Login Form in HTML and CSS
Explore the stylish world of glassmorphism as you create a modern login form using HTML and CSS. This guide breaks down the design process step by step. - Toggle Button using HTML, CSS, and JavaScript
Discover how to enhance user interaction by creating a sleek toggle button with HTML, CSS, and JavaScript. This tutorial covers everything from structure to styling. - Responsive Cards in HTML and CSS
Learn how to design eye-catching responsive cards that adapt seamlessly to any device. This guide offers practical tips for achieving stunning layouts. - Build a Google Gemini Chatbot Using HTML, CSS, and JS
Dive into chatbot development by creating a Google Gemini chatbot with HTML, CSS, and JavaScript. This tutorial will help you understand the basics of interactive forms.
