——Button · Free
Shine Button
A light sweep that travels across the button on hover. Pure Tailwind, no JS.
export function ShineButton({ label = "Hover me" }) {
return (
<button className="group relative overflow-hidden rounded-full border border-white/15 bg-white/10 px-7 py-3 font-medium text-white">
<span className="relative z-10">{label}</span>
<span className="absolute inset-0 -translate-x-full bg-gradient-to-r from-transparent via-white/45 to-transparent transition-transform duration-700 group-hover:translate-x-full" />
</button>
);
}How it works
Shine Button is a hand-built button component for React, styled with Tailwind and animated with Framer Motion — no heavy dependency tree, no 60-package install. Drop it in, keep your bundle lean, and it stays performant on real devices. It's free — copy the code above and ship it.
← Browse all components