Animated Button
A free, copy-paste animated button for React and Tailwind CSS with smooth hover, gradient and shine effects. Drop it in as your primary CTA — no dependencies, fully styleable.
Copy the code
export function AnimatedButton() {
return (
<button className="group relative inline-flex items-center gap-2 rounded-xl
bg-gradient-to-r from-violet-600 to-pink-500 px-6 py-3 font-bold text-white
shadow-lg shadow-violet-500/40 transition-transform hover:scale-[1.03] active:scale-95">
<span className="absolute inset-0 rounded-xl bg-white/20 opacity-0
transition-opacity group-hover:opacity-100" />
<span className="relative">Get started →</span>
</button>
)
}Tailwind CSS · no dependencies · MIT licensed. Paste it straight into any React, Next.js or Vite project.
About the animated button
This animated button is part of Empire UI — a free, open-source library of 26+ component types rendered across 40 visual styles, from glassmorphism to neo-brutalism. Every block is copy-paste ready in React and Tailwind CSS with no runtime dependencies.
Want it in a different look? Browse all 40 styles or grab the matching glassmorphism components.