.switch {

}

.switch__button {
    border: 2px solid #656565;
    border-radius: 12px;
    box-sizing: content-box;
    cursor: pointer;
    display: inline-block;
    height: 20px;
    margin-right: .5em;
    margin-bottom: 3px;
    vertical-align: middle;
    width: 40px;
}

.switch__button:before {
    background-color: #656565;
    border-radius: 50%;
    content: '';
    display: block;
    height:20px;
    transition: transform .3s ease-in-out, background-color .3s;
    width: 20px;
  }

.switch__button.active {
    background-color: #656565;
}


.switch__button.active:before {
      background-color: white;
      transform: translateX(20px);
    }