Toggle Button Generator

Create custom toggle buttons with this free online generator.
Customize colors, size, text, states, and other design settings while checking the result with a real-time preview.
HTML, CSS, and JavaScript code is generated automatically based on your settings, so you can copy the code you need and use it directly in your web project.

Customization

Preview

<label class="toggleButton">
  <input type="checkbox" class="toggleButton__checkbox" />
</label>.toggleButton {
  position: relative;
  display: block;
  width: 56px;
  height: 28px;
  border: 1px solid #555555;
  border-radius: 9999px;
  background-color: #dddddd;
  cursor: pointer;
}

.toggleButton:has(:focus-visible) {
  outline: auto;
  outline: auto -webkit-focus-ring-color;
}

.toggleButton:has(:checked) {
  background-color: #4ade80;
}

.toggleButton__checkbox {
  appearance: none;
  position: absolute;
  top: 50%;
  left: 2px;
  width: 24px;
  height: 24px;
  border: 1px solid #555555;
  border-radius: 9999px;
  transform: translateY(-50%);
  outline: none;
  background-color: #ffffff;
  transition: left 0.2s;
  cursor: pointer;
}

.toggleButton__checkbox:checked {
  left: calc(100% - 26px);
}

Notes

This tool is intended for modern browsers. Some generated CSS may not work in older browsers.
This site uses modern-normalize.css. The preview may look slightly different depending on the reset CSS or other styles used in your project.

\ Share on social media /

Related Tools

View All Tools

Toggle Button Generator

Customization

Related Tools

Hamburger Button Generator

Radio Button Generator

input type="range" Generator

Cubic Bezier Generator