Simple Chrome-like Toggle

Similar to the toggle control in Chrome's settings pages

HTML

<div class="switch"></div>
<br/>
<br/>

SCSS

.switch {
  background: #bbb;
  display: inline-block;
  width: 40px;
  height: 22px;
  border-radius: 99px;
  position: relative;
  cursor: pointer;
  box-shadow: 1px 1px 1px RGBA(0, 0, 0, 0.2), inset 2px 0px 1px 0px RGBA(0, 0, 0, 0.2);
  
  &::after {
    content: " ";
    display: inline-block;
    width: 18px;
    height: 18px;
    background: #667;
    border-radius: 99px;
    position: absolute;
    top: 2px;
    left: 2px;
    right: unset;
    box-shadow: 1px 1px 1px RGBA(0, 0, 0, 0.2), inset -1px 0px 1px 0px RGBA(250, 250, 250, 0.3);
    transition: all 150ms ease-in;
  }
  
  &.enabled {
    background: #abe;
    &::after {
      transform: translateX(100%);
      background: #55e;
    }
  }
}

JavaScript

document.querySelector(".switch").addEventListener("click", (ev) => {
  ev.currentTarget.classList.toggle("enabled");
}, false);