Realistic toggle button

index.pug

.background
  .toggle-body
    .toggle-btn

realistic-toggle-button.markdown

Realistic toggle button

A Pen by Alex on CodePen.

License.

script.js

const background = document.querySelector('.background');
const toggleBody = document.querySelector('.toggle-body');
const toggleBtn = document.querySelector('.toggle-btn');

toggleBtn.addEventListener('click', () => {
  background.classList.toggle('background--on');
  toggleBody.classList.toggle('toggle-body--on');
  toggleBtn.classList.toggle('toggle-btn--on');
  toggleBtn.classList.toggle('toggle-btn--scale');
});

style.scss

$pink: #FF8FDE;
$blue: #618BFF;

$animtime: 1.5s;
$easing: cubic-bezier(0.68, -0.15, 0.265, 1.35);
$iteration: 1;

.background {
  width: 100vw;
  height: 100vh;
  position: relative;
  background: $blue;
  transition: 1.5s $easing;
}
.background--on {
  background: $pink;
  transition: 1.5s $easing;
}
.toggle-body {
  width: 7rem;
  height: 4rem;
  position: absolute;
  top: calc(50% - 4rem / 2);
  left: calc(50% - 7rem / 2);
  background: white;
  border-radius: 2rem;
  animation: angle-reverse $animtime $easing;
}
.toggle-body--on {
  animation: angle $animtime $easing;
  animation-direction: alternate;
}
.toggle-btn {
  width: 2rem;
  height: 2rem;
  position: absolute;
  top: calc(50% - 2rem / 2);
  left: calc(27% - 2rem / 2);
  background: white;
  border-radius: 2rem;
  background: $blue;
  cursor: pointer;
  transform:  translateX(0);
  transition: $animtime $easing;
}
.toggle-btn--on {
  transition: $animtime $easing;
  transform:  translateX(150%);
  background: $pink;
}

@keyframes angle {
  0% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(45deg);
  }
  100% {
    transform: rotate(0deg);
  }
}
@keyframes angle-reverse {
  0% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(-45deg);
  }
  100% {
    transform: rotate(0deg);
  }
}