<div class="wrapper">
  <button class="animation type-1">SIGN-UP</button>
  <p>Animation Delay: <b>1s</b></p>
  <button class="animation type-2">SIGN-UP</button>
  <p>Animation Delay: <b>2s</b></p>
  <button class="animation type-3">SIGN-UP</button>
  <p>Animation Delay: <b>3s</b></p>
</div>

html, body {
  background: #81c564;
  width: 90%;
  height: 90%;
  margin: 5%;
}

p {
  color: #FFF;
  text-align: center;
  margin-bottom: 50px;
}
button {
  display: block;
  margin: 0 auto;
  background: #FFF;
  position: relative;
  padding: 15px 40px;
  border: none;
  color: #f49a25;
  font-size: 16px;
  text-align: center;
  text-decoration: none;
  font-weight: 600;
  animation-iteration-count: infinite;
}

@keyframes pulse {
  0% {
    transform: scale3d(1, 1, 1);
  }
  50%{
    transform: scale3d(1.1, 1.1, 1.1);
  }
  100% {
    transform: scale3d(1, 1, 1);
  }
}

.animation {
  animation-duration: 1s; 
  animation-name: pulse;
}

.type-1 {
  animation-delay: 1s; 
}
.type-2 {
  animation-delay: 2s; 
}
.type-3 {
  animation-delay: 3s; 
}