ComponentsButton Background Shine
Button Background Shine
ButtonBackgroundShine.tsx
export function ButtonBackgroundShine() {
return (
<button className="inline-flex animate-shine items-center justify-center rounded-xl text-sm border border-neutral-800 bg-[linear-gradient(110deg,#000103,45%,#1e2631,55%,#000103)] bg-[length:200%_100%] px-4 py-2 font-medium text-neutral-400 transition-colors">
Button
</button>
);
}
tailwind.config.ts
{
"animation": {
"shine": "shine 2s linear infinite"
},
"keyframes": {
"shine": {
"from": {
"backgroundPosition": "0 0"
},
"to": {
"backgroundPosition": "-200% 0"
}
}
}
}