How do you create a toggle button?

javascript

responsive-design

best-practices

browser-compatibility

byAlex Kataev·Jan 22, 2025

Here is a minimalist approach to creating a toggle button using an HTML checkbox, styled with CSS and powered by JavaScript:

<label class="toggle-switch">
  <input type="checkbox" onchange="toggleIt()">
  <span class="slider"></span>
</label>

.toggle-switch { position: relative; width: 60px; height: 34px; } /* Compact Suitcase */
.toggle-switch input { display: none; } /* Hide and Seek Champion */
.slider { 
  position: absolute; width: 100%; height: 100%; 
  background-color: #ccc; border-radius: 34px; 
  transition: background-color 0.2s; /* Flash, is that you? */
}
.slider::before { 
  content: ""; position: absolute; width: 26px; height: 26px;
  left: 4px; bottom: 4px; background-color: white; border-radius: 50%;
  transition: transform 0.2s; /* I believe I can fly! */
}
input:checked + .slider { background-color: #2196F3; } /* I fondly remember this sky color from outside */
input:checked + .slider::before { transform: translateX(26px); } /* Moving faster than my career progression */

function toggleIt() {
  // Toggle goes brrr...
}

This code snippet, like a cheap IKEA furniture, provides just the essential function, with some minimal finishing aesthetics. Ready to use!

Inspecting and improving the toggle button

Adding a pinch of jQuery magic

jQuery here is like your coworker who does a lot of work that makes your life easier:

$('input[type="checkbox"]').click(function(){
  if($(this).is(":checked")){
    $(this).addClass("checked"); // "Take a break, you earned it," said no boss ever
  } else {
    $(this).removeClass("checked"); // "I'm back to work," said everyone after a nanosecond break
  }
});

Get that 3D cinema effect at home

With CSS, get a 3D toggle button effect without those dorky 3D glasses:

input:not(:checked) + .slider {
  box-shadow: inset 0px 0px 5px grey; /* I am Groooooot! */
}
input:checked + .slider {
  box-shadow: 0px 2px 5px grey; /* I'm unplugging from the Matrix */
}

The art of labeling

Always label your buttons wisely, like labeling food in a shared fridge, for clarity and peace:

<label class="toggle-switch" aria-label="Toggle Button for Greatness">
  <!-- Your checkbox and slider elements, feeling labelled -->
</label>

All that jazz

The soft guitar riff of UI

Modernize your toggle with some neumorphism-inspired soft UI:

.slider {
  /* ...previous styling... */
  background-color: #e0e0e0; /* The poetic intensity of a Monday morning */
  box-shadow: inset 6px 6px 12px #babecc, /* Softer than a pillow fight */
              inset -6px -6px 12px #ffffff; /* Whiter than a programmer's legs in winter */
}

Animations that won't scare you

Add animations or icons to alleviate the tedium of watching paint dry:

$("input[type='checkbox']").change(function(){
  if($(this).is(":checked")) {
    // Add animation for checked state here
  } else {
    // Add animation for unchecked state here
  }
});

The common traps and pitfalls

Don't forget your "mobile-first" pledge

Always remember, a toggle button on mobile should have sweat, blood, and a media query:

/* For mobile devices */
@media screen and (max-width: 600px) {
  .toggle-switch {
    width: 80px; /* A positively reasonable touch target size */
  }
}

Be conscious about your JavaScript indulgences

Not everyone appreciates a good java like you do, opt for CSS-only solutions where possible:

/* CSS-only solution, because JavaScript got the day off */
input:checked + .slider::after {
  content: '✔'; /* V Green checked flag, brought to you by CSS */
  color: white; /* Like green on rice */
}