ComponentsButton Animated Border
Button Animated Border
ButtonAnimatedBorder.tsx
export function ButtonAnimatedBorder() {
return (
<button className="group relative grid overflow-hidden rounded-xl px-4 py-2 shadow-[0_1000px_0_0_hsl(0_0%_20%)_inset] transition-colors duration-200">
<span>
<span className="spark mask-gradient animate-flip before:animate-rotate absolute inset-0 h-[100%] w-[100%] overflow-hidden rounded-xl [mask:linear-gradient(white,_transparent_50%)] before:absolute before:aspect-square before:w-[200%] before:rotate-[-90deg] before:bg-[conic-gradient(from_0deg,transparent_0_340deg,white_360deg)] before:content-[''] before:[inset:0_auto_auto_50%] before:[translate:-50%_-15%]" />
</span>
<span className="backdrop absolute inset-px rounded-[11px] bg-neutral-950 transition-colors duration-200 group-hover:bg-neutral-900" />
<span className="z-10 text-neutral-400 text-sm font-medium">Button</span>
</button>
);
}
tailwind.config.ts
{
"animation": {
"flip": "flip 6s infinite steps(2, end)",
"rotate": "rotate 3s linear infinite both"
},
"keyframes": {
"flip": {
"to": {
"transform": "rotate(360deg)"
}
},
"rotate": {
"to": {
"transform": "rotate(90deg)"
}
}
}
}