Edit in JSFiddle

<div class="button">
    <input type="checkbox" id="some_button">
    <label for="some_button"></label>
</div>
.button label {
  display: block;
  width: 40px;
  height: 20px;
  border: 1px solid #dbdbdb;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
  position: relative;
}
.button label::before {
  content: '';
  width: 20px;
  height: 20px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
  background-color: #888;
  position: absolute;
  left: 0;
  transition: all 0.1s linear;
}
.button input[type=checkbox] {
  position: absolute;
  top: -99999px;
  opacity: 0;
}
.button input[type=checkbox]:checked + label::before {
  left: calc(100% - 20px);
}