Create Toggle Button in HTML CSS & JavaScript

byAnonymous -June 27, 2022

Hello buddy I hope you are doing and creating awesome projects. As always, today I have brought an interesting project for you and that is an Animated Toggle Button. In this project, you will learn to create an animated Toggle Button using HTML CSS, and JavaScript. The interesting part is that this toggle button is in a heart shape which makes this toggle button more fascinating than a normal toggle button.

A toggle button is a button that is used to turn on or off. For example, On the computer, we need to turn on the toggle button to connect the wifi. As with this, we can use the toggle button in lots of sections on the internet.

Have a quick look at the given image of our Toggle Button. The toggle button is in a heart shape, inside the heart shape we can see a circle. Actually on the left side toggle button is in off status and the right is in on status. When you click on the toggle button the inner circle moves and at the same time hear color also changes.

Let's watch the demo of this toggle button, and how it works and is animated. I watched the given video tutorial, you will watch the demo of this toggle button and also all the HTML CSS, and JavaScript code that I have used to create this button.

I have provided all the HTML CSS and JavaScript code that I have used to create this toggle button. Before getting into the source code file, I would like to explain the given video tutorial briefly.

As you have seen in the video tutorial. At first, we have seen a toggle button in the heart shape, inside the heart shape there was a circle. When I clicked on the toggle of heart shape the inner circle moved right and the heart color also changed to pink. Same as this when I again clicked on the toggle button the inner circle moved to the left and hear color changed to white. To make the heart shape and inner circle, I have used HTML and CSS, and to move the inner circle and heart's background color, I have used some JavaScript code.

Now, I believe you can create this type of toggle button using HTML CSS, and JavaScript. If you are feeling difficulty building this, I have provided all the code below.

You Might Like This:

Animate Toggle Button [Source Code]

To get the following HTML CSS and JavaScript code for the Toggle Button you need to create two files one is an HTML file and another is a CSS file. After creating these two files then you can copy-paste the given codes on your document. You can also download all source code files from the given download button.

HTML CODE:

 <!DOCTYPE html><!-- Coding by CodingLab | www.codinglabweb.com-->    <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>Animated Toggle Button</title>-->        <!-- CSS -->        <link rel="stylesheet" href="css/style.css">                                        </head>    <body>        <div class="heart">            <span class="circle"></span>        </div>         <!-- JavaScript -->     <script>            const heart = document.querySelector(".heart");              heart.addEventListener("click", () =>{             if(!heart.classList.contains("forward")){                 heart.classList.add("forward");                 heart.classList.remove("reverse")             }else{                 heart.classList.add("reverse")                 heart.classList.remove("forward");                  }             })       </script>    </body></html>

CSS CODE:

*{   margin: 0;   padding: 0;   box-sizing: border-box;   font-family: 'Poppins', sans-serif; } body{   height: 100vh;   display: flex;   align-items: center;   justify-content: center;   background-color: #e2e2e2; } .heart{   position: relative;   height: 70px;   width: 70px;   background-color: #fff;   transform: rotate(-45deg);   border-bottom-left-radius: 100px;   box-shadow: 0 0 8px rgba(0, 0, 0, 0.15);   cursor: pointer; } .heart::before{   content: '';   position: absolute;   height: 100%;   width: 100%;   top: -50%;   left: 0;   border-radius: 50px;   background-color: #fff; } .heart::after{   content: '';   position: absolute;   height: 100%;   width: 100%;   top: 0;   right: -50%;   border-radius: 50px;   background-color: #fff; } .heart, .heart::before, .heart::after{   transition: 0.6s;   transition-delay: 0.3s; } .heart.forward,.heart.forward::before, .heart.forward::after{   background-color: #eb608c; } .circle {   position: absolute;   height: 55px;   width: 55px;   left: 7px;   top: -28px;   border-radius: 50%;   z-index: 100;   transition: 0.6s;   background-color: #fff;   box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); } .heart.forward .circle{   animation: move 0.6s forwards; } @keyframes move {   0%{     left: 7px;     top: -28px;   }   50%{     top: -1px;     left: 17px;   }   100%{     left: 42px;     top: 7px;   } }  .heart.reverse .circle{   animation: back1 0.6s forwards; } @keyframes back1 {   0%{     left: 42px;     top: 7px;   }   50%{     left: 17px;     top: 1px;   }   100%{     left: 7px;     top: -28px;   } }

Trending

Deface poc Wp Add Admin

Cara deface Wp ghost Theme

8 Rekomendasi Cloud Storage Gratis Terbaik Ditahun 2021

XML-RPC BRUTE FORCE V.2.9.16 Free Download

SCRIPT WEB PH1SING PUBG MIDASBUY SEASON 23 TERBARU - FREE DOWNLOAD

Create Toggle Button in HTML CSS & JavaScript

You Might Like This:

Animate Toggle Button [Source Code]

Post a Comment

Contact Form