Implementation of Liquid button

implementation-of-liquid-button.markdown

Implementation of Liquid button

Original work: https://material.uplabs.com/posts/liquid-toggle-button by Apostol Voicu

A Pen by Alex on CodePen.

License.

index.pug

.background
  .toggle-body
    .toggle-btn

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

$green: #3dbf87;
$red: #FC3164;

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

.background {
  width: 100vw;
  height: 100vh;
  position: relative;
  background: $red;
  transition: 1.5s $easing;
}
.background--on {
  background: $green;
  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;
  transform: rotate(0deg);
  transition: $animtime $easing;
}
.toggle-body--on {
  transform: rotate(180deg);
  transition: $animtime $easing;
}
.toggle-btn {
  width: 2rem;
  height: 2rem;
  position: absolute;
  top: calc(50% - 2rem / 2);
  left: calc(27% - 2rem / 2);
  background: white;
  border-radius: 2rem;
  background: $red;
  cursor: pointer;
  transform: rotate(0deg);
  transform-origin: 130% 115%;
  transition: $animtime $easing;
}
.toggle-btn--on {
  transition: $animtime $easing;
  transform: rotate(-357deg);
  background: $green;
  transform-origin: 130% 150%;
}