Why is this button not animating?

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

JSX:

<div className="connect-wallet-container">
            <button
              className="cta-button connect-wallet-button"
              onClick={connectWalletAction}
            >
              Connect Wallet
            </button>
          </div>

CSS:

.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;
}

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.