ASWCode | Simple Toggle Button HTML & CSS Snippet

Simple Toggle Button

This Simple Toggle Button is a clean, responsive switch built using HTML and CSS. It allows users to toggle between two states with smooth animations. The snippet is perfect for forms, UI toggles, dark mode switches, and more. You can easily customize it by changing the colors, sizes, and transitions to match your web design. It's lightweight and does not require JavaScript, making it ideal for fast-loading web projects. Enhance your UI quickly with this ready-made toggle switch.

How to use: Copy the code into your HTML file. Wrap it in a form or div as needed.
Change colors: Edit background-color in .slider and input:checked + .slider.
Adjust effect: Modify width, height, or transition for animation speed and size.

<label class="switch">
  <input type="checkbox">
  <span class="slider"></span>
</label>

<style>
.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  transition: 0.4s;
  border-radius: 34px;
}

.slider::before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  transition: 0.4s;
  border-radius: 50%;
}

input:checked + .slider {
  background-color: #4CAF50;
}

input:checked + .slider::before {
  transform: translateX(26px);
}
</style>