I copied this code from a tutorial, where the animation works just fine:

The button just shows a static gradient though. Also, I'm having a hard time justifying the text vertically to the center of the button. E.g. top: 10px actually pushes the text below the button.

.cta-button {
  height: 32px;
  border: 0;
  padding: 0px 20px;
  border-radius: 5px;
  cursor: pointer;
  font-size: 16px;
  font-weight: bold;
  color: white;
  text-justify: center;
}

.connect-wallet-button {
  background-image: linear-gradient( to right, #ff8177 0%, #ff867a 0%, #000 21%, #f99185 52%, #cf556c 78%, #b12a5b 100%);
  background-size: 200% 200%;
  animation: gradient-animation 4s ease infinite;
}

<div >
  <button >
    Connect Wallet
  </button>
</div>

CodePudding user response：

you are missing keyframes, the animation itself @keyframes gradient-animation https://www.w3schools.com/css/tryit.asp?filename=trycss3_animation1