To create a toggle switch, we will use HTML & CSS. If you want a more attractive toggle then you can add sliding animation, bouncing effect, color changes. etc. In this post, we will look at the creation of HTML & CSS.
The Source Code is upload to GitHub. Pull requests are open. Here is the link.
For the structure, We will use the HTML <div> tags & little JavaScript event to toggle the CSS class.
Preview (Toggle Switch with 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>Toggle button | @code.architects</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<div class="container">
<div onclick="this.classList.toggle('active')" class="toggle">
<div class="circle"></div>
</div>
</div>
</body>
</html>To style the HTML code. The CSS is design to make the HTML component attractive. The CSS property & JavaScript event is used to make the style on the toggle switch.
CSS
body {
background: rgb(12, 12, 12);
}
.container {
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
.toggle{
background-color:silver;
transition:0.3s;
height:30px;
border-radius:30px;
width:80px;
padding:8px;
}
.toggle .circle{
height:30px;
width:30px;
background-color:white;
border-radius:100%;
transition:0.5s;
}
.toggle.active{
background-color:rgb(0, 102, 255);
}
.toggle.active .circle{
margin-left:50px;
} Here is the preview of the Code for Toggle Switch with HTML & CSS.
Thanks for scrolling & Share this blog (Toggle Switch with HTML & CSS), if you have liked it. You can read our other blogs here.
