Toggle switch button

//TOGGLE SWITCH BUTTON
<div class=a>
<div class="toggle" id>
  <label class="switch">
    <input type="checkbox" id="checkbox">
    <span class="slider round"></span>
  </label>
</div>
<div class="ball" id="ball"></div>
//IF CSS WONT WORK TAKE <STYLE></STYLE> OUTSIDE DIV!
<style>
.a {
  position:absolute;
  top:0;left:0;right:0;bottom:0;
  justify-content:center;
  display: flex;
  align-items: center;
  padding-bottom: 50px;
  background-color: #dfe6e9;
}

.switch {
  position: relative;
  display: inline-block;
  height: 34px;
  width: 60px;
}

.switch input {display: none;}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;left: 0;right: 0;bottom: 0;
  background-color: #fc5c65;
  -webkit- transition: .6s;
  transition: .6s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: #fff;
  -webkit- transition: .6s;
  transition: .6s;
}

input:checked + .slider {
  background-color: #20bf6b;
}

input:focus + .slider {
  box-shadow: 0 0 1px #333;

}

input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

.slider.round {
  border-radius: 41px;
}

.slider.round:before {
  border-radius: 50%;
}

.ball {
  width: 100px;
  height: 100px;
  background-color: #fc5c65;
  border-radius: 50%;
  margin: 50px;
  animation: bounce .6s;
  animation-direction: alternate;
  animation-timing-function: cubic-bezier(.5,0.05,1,.5);
  animation-iteration-count: infinite;
  animation-play-state: paused;
}


@keyframes bounce {
    from { transform: translate3d(0, -100px, 0);     }
  to   { transform: translate3d(0, 100px, 0); }
}

/* Prefix Support */
#ball {
  box-shadow: 4px 4px 24px #cacaca;
}

.ball {
  -webkit-animation-name: bounce;
  -webkit-animation-duration: 0.5s;
  -webkit-animation-direction: alternate;
  -webkit-animation-timing-function: cubic-bezier(.5,0.05,1,.5);
  -webkit-animation-iteration-count: infinite;
}

@-webkit-keyframes bounce {
  from { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }
  to   { -webkit-transform: translate3d(0, 100px, 0); transform: translate3d(0, 100px, 0); }
}

.slider {
  box-shadow: 8px 8px 18px #cacaca;
}
</style>
</div>
<script>
document.getElementById("checkbox").onclick = function() {
  if(document.getElementById("checkbox").checked == false){
    document.getElementById("ball").style.animationPlayState = "paused";
    document.getElementById("ball").style.backgroundColor = "#fc5c65";
  }else{
    document.getElementById("ball").style.animationPlayState =  "running";
    document.getElementById("ball").style.backgroundColor = "#20bf6b";
  }
}

document.getElementById("ball").style.transition = "all .4s";

</script>