Build a on/off switch button using HTML CSS and JavaScript

Web Development

In this web development project we are goin to create a animated on off switch button using just HTML CSS and JavaScript and also add a delayed stand by effect using setTimeout function and clearTimeout in order to remove this functionality.


Buy me a Coffee

Hi, if you like my content and you wish to give back you can buy me a Coffee!


Buy me a Pizza

Hi, if you like my content and you wish to give back you can buy me a Pizza!


Project overview

  • Build a on/off switch button
    • Project setup
    • Create HTML CSS JS files
    • create HTML5 boiler plate
    • Link up CSS and JS
    • Create and style the switch buttons using HTML and CSS
    • Get elements from the DOM using js getElementById and querySelector
    • Add event listeners of click event to the buttons
    • Create addRemoveActive utility function
    • Remove standby status of the switch container using setTimeout()
    • Create timeout function for standby of the switch container

Project setup


 <h1>On/Off Switch</h1>
    <div class="switch-container standby">
      <button id="Off">OFF</button>
      <button id="On">ON</button>


@import url("");
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;

body {
  font-family: "Poppins", sans-serif;
  background-color: #2d2d2d;
  color: #fff;

body h1 {
  text-align: center;
  margin: 5rem auto;

.switch-container {
  position: relative;
  display: flex;
  width: 260px;
  height: 100px;
  background-color: linear-gradient;
  margin: auto;
  border-radius: 50px;
  background: #0e0e0e;
  border: 1px solid #222;
  box-shadow: 0 0 5px 1px #333;

.switch-container.standby {
  border: 1px solid #2196f3;
  box-shadow: 0 0 6px 1px #2196f3;

.switch-container button {
  cursor: pointer;
  transition: 0.3s ease;
  font-size: 1.1rem;
  width: 100%;
  border-radius: 50px;
  margin: 0.8rem;
  background: #151515;
  color: gray;

.switch-container {
  background: linear-gradient(90deg, #4f4f4f 30%, #2e2e2e 66%, #151515 100%);
  color: #b8021d;

.switch-container {
  background: linear-gradient(90deg, #4f4f4f 30%, #2e2e2e 66%, #151515 100%);
  color: #4c8137;
/*# */

Menu JS

const OffBtn = document.getElementById("Off");
const OnBtn = document.getElementById("On");
const switchContainer = document.querySelector(".switch-container");
// Switch On

OnBtn.onclick = () => {
  // OffBtn.classList.remove("active");
  // OnBtn.classList.add("active");
  addRemoveActive(OffBtn, OnBtn);
// Switch Off
OffBtn.onclick = () => {
  if (OnBtn.classList.contains("active")) {
    addRemoveActive(OnBtn, OffBtn);
  } else {

// todo: Remove standby from the switch container

function removeStandby() {
  if (OffBtn.classList.contains("active")) {
  } else {
// todo: create timeout for standby

let standby;

function startStandby() {
  standby = setTimeout(() => {
  }, 5000);
// todo: addRemoveActive utility function
function addRemoveActive(remove, add) {

Show and hide the widgets tab

Become a web developer!

Learn HTML CSS & Sass JavaScript Bootstrap and more...

Web development

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.