CSS Animation – Button

---

HTML CODE

<div class="check">
  <input type="checkbox">
</div>

---

CSS CODE

body{
  padding:0;
  margin:0;
  background-color:#0d0d0d;
}
.check{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
}
input[type="checkbox"]{
  -webkit-appearance:none;
  width: 300px;
  height:180px;
  background-color:#262626;
  border-radius:200px;
  border:5px solid #333333;
  outline: none;
  transition: .5s;
}
input:checked[type="checkbox"]{
  background-color:#993d00;
  border: 5px solid #662900;
}
input[type="checkbox"]:before{
  content:"";
  position:absolute;
  top:8px;
  left:10px;
  border-radius:50%;
  width:170px;
  height:170px;
  background-color:#000;
  transition: .5s;
}
input:checked[type="checkbox"]:before{
  left:130px
}
input[type="checkbox"]:after{
  content:"";
  position:absolute;
  top:75px;
  left:75px;
  border-radius:50%;
  width:20px;
  height:20px;
  border:5px solid white;
  transition: .5s;
}
input:checked[type="checkbox"]:after{
  left:215px;
  width:0;
  border-radius:0;
}