$count: 60;

​

:root {

  --animation-time: 1s;

  --animation-timging-function: cubic-bezier(0.215, 0.61, 0.355, 1);

  --color-primary: #e91e63;

  --color-primary-hover: #ff508c;

}

​

html {

  font-size: 10px;

}

​

body {

  display: flex;

  overflow: hidden;

  align-items: center;

  justify-content: center;

  width: 100vw;

  height: 100vh;

  font-family: var(--font-primary);

}

​

.btn {

  position: relative;

  padding: 1.5rem 4.5rem;

  background: var(--color-primary);

  color: #fff;

  border: 0;

  font-size: 16px;

  border-radius: 0.4rem;

  box-shadow: -1px 1px 8px rgba(0, 0, 0, 0.2);

  cursor: pointer;

  transition: background 250ms, box-shadow 250ms;

  &:hover {

    background: var(--color-primary-hover);

    box-shadow: -2px 2px 16px rgba(0, 0, 0, 0.3);

  }

  &:active {

    box-shadow: -4px 4px 24px rgba(0, 0, 0, 0.5);

  }

}

​

.btn .text {

  position: relative;

  z-index: 2;

}

​

.btn .dot {

  position: absolute;

  z-index: -1;

  display: block;

  width: 4px;

  height: 4px;

  transform-origin: 5px 5px;

  pointer-events: none;

  @for $i from 1 through $count { 

    &:nth-child(#{$i}) {

        top: 50%;

        left: 50%;

        transform: translate3d(-50%, -50%, 0) rotate(#{360 / $count * $i}deg);

      }

  }

  &::before {

    content: "";

    position: absolute;

    top: 0;

    left: 0;

    display: block;

    width: 4px;

    height: 4px;

    background-color: var(--color-primary);

    border-radius: 50%;

    offset-path: path("M0 1c7.1 0 10.7 2 14.3 4s7.1 4 14.3 4 10.7-2 14.3-4 7.2-4 14.3-4 10.7 2 14.3 4 7.1 4 14.3 4 10.7-2 14.3-4 7.1-4 14.3-4 10.7 2 14.3 4 7.1 4 14.3 4 10.7-2 14.3-4 7.1-4 14.3-4 10.7 2 14.3 4 7.1 4 14.3 4");

    offset-distance: 0;

    pointer-events: none;

  }

}

​

.btn.is-animating .dot:nth-child(4n+1)::before {

  animation: dot var(--animation-time) var(--animation-timging-function);

}

.btn.is-animating .dot:nth-child(4n+2)::before {

  border: 1px solid var(--color-primary);

  background: transparent;

  animation: dot var(--animation-time) var(--animation-timging-function) 0.1s;

}

.btn.is-animating .dot:nth-child(4n+3)::before {

  animation: dot var(--animation-time) var(--animation-timging-function) 0.2s;

}

.btn.is-animating .dot:nth-child(4n)::before {

  border: 1px solid var(--color-primary);

  background: transparent;

  animation: dot var(--animation-time) var(--animation-timging-function) 0.3s;

}

​

@keyframes dot {

  0% {

    offset-distance: 0%;

    opacity: 1;

  }

  90% {

    offset-distance: 60%;

    opacity: .5;

  }

  100% {

    offset-distance: 100%;

    opacity: 0;

  }

}

var $btn = document.querySelector('.btn');

​

$btn.addEventListener('click', e => {

  window.requestAnimationFrame(() => {

    $btn.classList.remove('is-animating');

    window.requestAnimationFrame(() => {

      $btn.classList.add('is-animating');

    });

  });

});