Pill Toggle Button

<div class="toggle-wrap" id="toggle">
  <div class="toggle-thumb"></div>
</div>

.toggle-wrap {
  width: 52px;
  height: 28px;
  background: #e5e5e5;
  border-radius: 14px;
  cursor: pointer;
  padding: 3px;
  transition: background .25s;
}
.toggle-wrap.active {
  background: #1a1a1a;
}
.toggle-thumb {
  width: 22px;
  height: 22px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 1px 4px rgba(0,0,0,.1);
  transition: transform .25s cubic-bezier(.4,0,.2,1);
}
.toggle-wrap.active .toggle-thumb {
  transform: translateX(24px);
}

document.getElementById('toggle').addEventListener('click', function() {
  this.classList.toggle('active');
});