
Buttons that rotate an icon or the whole label on hover. Add subtle motion to refresh, settings, and other action icons across your app today.
@shadcn-ui-blocks
import { Button } from '@/components/ui/button';
export default function RotateButtons() {
return (
<div className="flex flex-wrap justify-center gap-4 p-6">
<Button
variant="default"
className="transition-transform duration-300 hover:rotate-3"
>
Default
</Button>
<Button
variant="secondary"
className="transition-transform duration-300 hover:rotate-3"
>
Secondary
</Button>
<Button
variant="destructive"
className="transition-transform duration-300 hover:rotate-3"
>
Destructive
</Button>
<Button
variant="outline"
className="transition-transform duration-300 hover:rotate-3"
>
Outline
</Button>
<Button
variant="ghost"
className="transition-transform duration-300 hover:rotate-3"
>
Ghost
</Button>
</div>
);
}






























