Untitled

<input type="checkbox" name="checkbox" id="asa">

<label for="asa"></label>

*{margin: 0;padding: 0;}

input{

  visibility:hidden;

}

label{

  width:100px;

  height:30px;

  background:red;

  position:relative;

  display:block;

  border-radius:40px;

}

label:after{

  content:'';

  margin:2px;

  width:25px;

  height:25px;

  position:absolute;

  background:black;

  border-radius:50%;

  right: 70px;

  -webkit-transition: right 0.5s;

  transition: right 0.5s;

}

input:checked + label:after {

  right:0;

}