How to Create a Smooth Toggle Switch Using Pure CSS | FAMOUSCODE

FAMOUSCODE.DEV

PURE CSS

Live UI Preview

HTML & CSS CODE

<!-- HTML -->
<input type="checkbox" class="toggle">

<!-- CSS -->
<style>
.toggle {
  appearance: none;
  width: 60px;
  height: 30px;
  background: #ccc;
  border-radius: 30px;
  position: relative;
  cursor: pointer;
  transition: 0.3s;
}
.toggle::after {
  content: "";
  position: absolute;
  top: 3px; left: 3px;
  width: 24px; height: 24px;
  background: white;
  border-radius: 50%;
  transition: 0.3s;
}
.toggle:checked { background: #0d9488; }
.toggle:checked::after { transform: translateX(30px); }
</style>

Follow @famouscode.dev for more UI tricks!