JSFiddle - React, Tailwind, and code Playground

by willystyle

HTML

<button class="button-bouncing">
Some Button
</button>

CSS

.button-bouncing {
  background-color: #de4e61;
  border-radius: 5px;
  padding: .3em 1.5em;
  color: #fff;
  text-transform: uppercase;
  animation: button-bouncing 5s infinite 2s ease-out;
  animation-name: button-bouncing;
  animation-duration: 5s;
  animation-timing-function: ease-out;
  animation-delay: 2s;
  animation-iteration-count: infinite;
  animation-direction: normal;
  animation-fill-mode: none;
  animation-play-state: running;
  display: inline-block;
}

@keyframes button-bouncing {
  0% {
      transform: scale(1);
  }
  2% {
      transform: scale(1.1);
  }
  4% {
      transform: scale(.9);
  }
  6% {
      transform: scale(1.05);
  }
  8% {
      transform: scale(1.03);
  }
  10% {
      transform: scale(1);
  }
}