Components
Loading preview...
CornerFrameAnimatedButton is a customizable, animated button component that features stylish corner-frame borders and a smooth hover gradient reveal effect. Built with framer-motion and Tailwind CSS, it provides a clean, interactive visual style without compromising accessibility or flexibility.
@arunachalam0606
npx shadcn@latest add https://21st.dev/r/arunachalam0606/corner-frame-animated-button-1import CornerFrameAnimatedButton from '@/components/ui/corner-frame-animated-button-1';
export default function Demo() {
return (
<div className="min-h-screen flex items-center justify-center">
<div className="flex flex-col items-center space-y-8">
<CornerFrameAnimatedButton onClick={() => console.log('Button clicked!')} />
<CornerFrameAnimatedButton
buttonText="Custom Color Button"
className="px-6 py-3 text-base"
color="bg-gradient-to-r from-orange-500 to-red-600"
onClick={() => console.log('Custom Color button!')}
/>
</div>
</div>
);
}