Toggle with HTML+CSS+JavaScript

HTML

<div class="container">
  <div class="toggle-btn" 
      onclick="this.classList.toggle('active')">
    <div class="inner-circle"></div>
  </div>
</div>

CSS

.container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.toggle-btn {
  width: 80px;
  height: 40px;
  background-color: gray;
  border-radius: 30px;
  padding: 5px;
  cursor: pointer;
  transition: all 300ms ease-in-out;
}
.toggle-btn > .inner-circle {
  width: 40px;
  height: 40px;
  background-color: #fff;
  border-radius: 50%;
  transition: all 300ms ease-in-out;
}
.toggle-btn.active {
  background-color: #00acee;
}
.toggle-btn.active > .inner-circle {
  margin-left: 40px;
}

https://codepen.io/anon/pen/eXNVbB