Button Components

An animated SVG close icon that features a customizable rotation effect using Framer Motion, supporting both continuous looping and hover-triggered animations.

An animated SVG send icon featuring a paper airplane design that uses Framer Motion to perform rotation, scaling, and translation effects either continuously or on hover.

A high-impact button featuring a rotating, animated glowing border effect created with CSS conic gradients and a smooth inner content container for a modern, premium aesthetic.

A bold neo-brutalist button featuring a skewed design, high-contrast offset drop shadows, and a CSS-based shimmer hover effect built with Tailwind CSS.

A minimalist button featuring a responsive corner-dash animation that expands to frame the entire component upon hover, built with Tailwind CSS.

A modern, rounded button featuring a smooth Framer Motion hover animation that slides an arrow icon into view while transitioning the text layout.

A modern interactive button featuring a smooth slide-up text animation on hover, built with Framer Motion and Tailwind CSS to create a dynamic, layered transition effect.

A pill-shaped button featuring a continuous linear gradient shimmer animation across its text, built with Framer Motion for smooth transitions and hover-scale interactivity.

A premium button featuring a dark aesthetic with a dynamic, animated 5x5 grid of light-up bubbles that simulate a moving arrow effect using React state and Tailwind CSS.

A floating action button that expands into a vertical list of animated menu items using Framer Motion, featuring click-outside detection and a rotating trigger icon.

A dynamic ripple effect wrapper component that adds interactive, animated circular waves to buttons or elements upon click, built with Tailwind CSS and Framer Motion.

A dynamic ripple effect wrapper component that adds a modern material-design style click animation to buttons or any HTML element using Tailwind CSS and Framer Motion.

A magnetic hover effect wrapper component that uses Framer Motion to create a spring-based attraction animation, pulling the wrapped element toward the cursor position for enhanced interactive feedback.

A magnetic hover effect wrapper that uses Framer Motion to create a spring-based attraction animation, pulling the wrapped element toward the cursor position for enhanced interactive feedback.

A disabled icon button featuring a centered, infinitely rotating Lucide LoaderCircleIcon, designed to indicate a loading state or ongoing background process.

A disabled button component featuring a spinning Lucide LoaderCircleIcon to indicate an active loading state or ongoing background process.

A collection of standard UI buttons in various variants including secondary, destructive, outline, and ghost styles, all configured in a disabled state to prevent user interaction.

A collection of buttons demonstrating various size variants including small, default, and large, built with Tailwind CSS for consistent UI styling.

A collection of icon-only buttons featuring three distinct size variants (small, default, and large) using Lucide React icons for compact UI actions.

A minimalist square-shaped button component featuring a centered Lucide icon, designed for compact UI actions and navigation controls.