<section class="form">
  <label class="switch">
    <input type="checkbox">
    <span class="slide"></span>
  </label>
</section>

html,
body {
  height: 100%;
  background: #D8DBE2;
}

.form {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  align-items: center;
  height: 100%;
  width: 100%;
}

.switch {
  width: 10rem;
  height: .5rem;
  position: relative;
  display: block;
  
  input[type='checkbox'] {
    display: none;
    
    &:checked + .slide {
      background: #37505c;
      
      &::before {
        background: #35CE8D;
        transform: translate(110%, -50%);
      }
    }
    
    &:focus + .slide {
      box-shadow: 0 0 .1rem red;
    }
  }
  
  .slide {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 100%;
    height: 5rem;
    background: #e7ecef;
    border: 2px solid #37505c;
    transition: .5s;
    border-radius: 10rem;
    
    &::before {
      position: absolute;
      content: '';
      height: 4rem;
      width: 4rem;
      top: 50%;
      left: .5rem;
      background: #FF1654;
      transition: .5s;
      border-radius: 100%;
      transform: translateY(-50%);
      border: 2px solid #fff;
    }
  }
}