Toggle Switch with HTML & CSS

Toggle Switch with HTML & CSS

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.

Follow us on Instagram & GitHub. 💝

Leave a Comment

Comments

No comments yet. Why don’t you start the discussion?

Leave a Reply

Your email address will not be published. Required fields are marked *

twenty − 17 =