How to create button with multiple pulse effects

I want a button which pulses multiple times (three or so), like in this Dribble video demo. The button pulses should have an interval between pulses of about 300-400ms, and also if the twisting effect can be achieved somehow that would be great.

I have this code so far, but the pulsing animation is not particularly close to the one described and linked above.

body {
  background: black;
}

.button {
  padding: 0.75em 1.5em;
  border: 3px solid white;
  border-radius: 15px;
}

.button:hover {
  animation: pulse 4s infinite;
  transition: 1s ease all;
}

@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7),
      0 0 0 0 rgba(255, 255, 255, 0.5), 0 0 0 0 rgba(255, 255, 255, 0.3);
  }

  50% {
    box-shadow: 0 0 0 10px rgba(255, 255, 255, 0),
      0 0 0 20px rgba(255, 255, 255, 0), 0 0 0 30px rgba(255, 255, 255, 0);
  }

  100% {
    box-shadow: 0 0 0 30px rgba(255, 255, 255, 0),
      0 0 0 40px rgba(255, 255, 255, 0), 0 0 0 50px rgba(255, 255, 255, 0);
  }
}

<button class="button">Button</button>

How can I make my code more closely match the description and video example above?

Solution

Here is an idea using outline and pseudo-elements:

.button {
  padding: 0.75em 1.5em;
  border-radius: 1em;
  font-size: 30px;
  position: relative;
}
.button:before,
.button:after {
  content:"";
  position: absolute;
  inset: 0;
  outline: inherit;
  border-radius: inherit;
}
.button:hover,
.button:hover:before,
.button:hover:after {
  outline: 2px solid #fff0;
  animation: pulse 2s infinite linear;
}
.button:hover:before {
  animation-delay: .4s;
}
.button:hover:after {
  animation-delay: .8s;
}

@keyframes pulse {
  0%,10%   {outline-offset:0px; outline-color:#fff0}
  50%      {outline-offset:20px;outline-color:#fff9}
  90%,100% {outline-offset:40px;outline-color:#fff0}
}

body {
  margin: 0;
  min-height: 100vh;
  display: grid;
  place-items: center;
  background: #000;
}

<button class="button">Button</button>