Schaut Euch die Demo an oder ladet Euch diese gezippt runter!

HTML

<main>
    <p id="button"><a href="#">Click mich!</a></p>
</main>

CSS

#button {
  cursor: pointer;

  /* Dauer der Animation */
  animation-duration: 4s;

  /* Name der Animation */
  animation-name: buttonAni;

  /* wie oft soll die Animation ablaufen, hier unendlich */
  animation-iteration-count: infinite;

  /* Ani läuft zuerst vorwärts, dann rückwärts ab */
  animation-direction: alternate-reverse;
}

#button:hover {
  /* hält die Animation an, wenn Mousezeiger darüber liegt */
  animation-play-state: paused;
}

@keyframes buttonAni {
  0% {
    transform: scale(0.8);
    box-shadow: 0 0 7px 2px rgba(0, 0, 0, 0.3);
  }
  35% {
    transform: rotate(0deg);
  }
  40% {
    transform: rotate(10deg);
  }
  45% {
    transform: rotate(-10deg);
  }
  50% {
    transform: rotate(10deg);
  }
  55% {
    transform: rotate(-10deg);
  }
  60% {
    transform: rotate(0deg);
  }
  100% {
    transform: scale(1.8);
    box-shadow: 0 0 15px 5px rgba(0, 0, 0, 0.3);
  }
}