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.
you are missing keyframes, the animation itself @keyframes gradient-animation https://www.w3schools.com/css/tryit.asp?filename=trycss3_animation1
you are missing keyframes, the animation itself
See less@keyframes gradient-animation
https://www.w3schools.com/css/tryit.asp?filename=trycss3_animation1