Rainbow Animated Button

<div class="flex items-center justify-center">
  <style>
:root {
--color-1: 0 100% 63%;
--color-2: 270 100% 63%;
--color-3: 210 100% 63%;
--color-4: 195 100% 63%;
--color-5: 90 100% 63%;
--speed: 2s;
}
@keyframes rainbow {
0% { background-position: 0% 50%; }
100% { background-position: 200% 50%; }
}
.animate-rainbow {
animation: rainbow var(--speed, 2s) infinite linear;
}
.rainbow-button {
position: relative;
display: inline-flex;
height: 44px;
align-items: center;
justify-content: center;
border-radius: 12px;
border: 2px solid transparent;
padding: 0 32px;
font-weight: 500;
font-size: 14px;
color: white;
cursor: pointer;
transition: all 0.3s ease;
background:
linear-gradient(#121213, #121213) padding-box,
linear-gradient(#121213 50%, rgba(18,18,19,0.6) 80%, rgba(18,18,19,0)) border-box,
linear-gradient(90deg,
hsl(var(--color-1)),
hsl(var(--color-5)),
hsl(var(--color-3)),
hsl(var(--color-4)),
hsl(var(--color-2))
) border-box;
background-size: 200% 200%;
transform: translateY(20px) scale(0.95);
animation: rainbow var(--speed, 2s) infinite linear, fadeIn 0.8s ease-out 0.5s forwards;
}
.rainbow-button::before {
content: '';
position: absolute;
bottom: -20%;
left: 50%;
z-index: -1;
height: 20%;
width: 60%;
transform: translateX(-50%);
background: linear-gradient(90deg,
hsl(var(--color-1)),
hsl(var(--color-5)),
hsl(var(--color-3)),
hsl(var(--color-4)),
hsl(var(--color-2))
);
background-size: 200% 200%;
filter: blur(12px);
animation: rainbow var(--speed, 2s) infinite linear;
opacity: 0.7;
}
</style>
  <div class="text-center">
    <button class="rainbow-button">Get Unlimited Access</button>
  </div>
</div>