HTML and CSS - Web Designer Freelancer | UI/ UX Designer

+9661588287
[email protected]

Sun, May 19, 2024

Home
HTML and CSS Javascript

Create Toggle Button using HTML CSS and JavaScript

May 13, 2024

0

HTML and CSS

Click Animation Button in HTML, CSS, and JavaScript.

May 13, 2024

0

PHP

How to send mail using PHP on an XAMPP Server

May 11, 2024

0

HTML and CSS

How to Design a Responsive Fiverr Website in HTML and CSS

May 9, 2024

0
HTML & CSS
HTML and CSS Javascript

Show & Hide Password in HTML CSS & JavaScript

October 4, 2023

3

HTML and CSS Javascript

How to Implement Form Validation in HTML CSS and JavaScript

October 5, 2023

1

HTML and CSS

Create A Simple Pricing Card in HTML and CSS

October 8, 2023

1
JavaScript
HTML and CSS Javascript

Create Toggle Button using HTML CSS and JavaScript

May 13, 2024

0

HTML and CSS Javascript

Create a Website with a Login/Registration Form in HTML, CSS and JavaScript

April 29, 2024

6

HTML and CSS Javascript

How to make Testimonial Slider in HTML CSS & Js | SwiperJS

October 10, 2023

0
Blog
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:
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>
        
        <link rel="stylesheet" href="css/style.css">
    </head>
    <body>
        <div></div>
        
        <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;
}
```
Resume
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:
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>
        
        <link rel="stylesheet" href="css/style.css">
    </head>
    <body>
        <div></div>
        
        <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;
}
```
About us
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:
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>
        
        <link rel="stylesheet" href="css/style.css">
    </head>
    <body>
        <div></div>
        
        <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;
}
```
Contact us
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:
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>
        
        <link rel="stylesheet" href="css/style.css">
    </head>
    <body>
        <div></div>
        
        <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;
}
```