I found this snippet on a coding blog, where the design looked perfect:
However, when I tried implementing it, the button displayed a static gradient instead of animated. Additionally, aligning the text in the center vertically seems to be trickier than expected. For instance, using top: 10px actually shifts the text below the button.
https://i.sstatic.net/FWVgV.png
.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 class="connect-wallet-container">
<button class="cta-button connect-wallet-button">
Connect Wallet
</button>
</div>