Buttons.

From AI generate buttons with shimmer sweeps to 3D push, neon glow, glitch overlays and stateful actions — every button is production-ready, accessible and copy-paste friendly.

108 componentsHover to copyTailwind CSSZero deps

Buttons Inputs Badges & Chips Cards Forms Loaders Navigation Overlay Feedback Data Display Text Effects Backgrounds Effects Hero Sections Landing Blog & Content Layout Dashboard AI Interfaces E-commerce Auth Settings

Interactive

Stateful & AI buttons

Real React state — click them. Generate flows, copy confirmation, optimistic likes, two-step destructive confirms and AI model pickers.

12 variants

Signature

AI Generate

tsx

Copy to clipboard

tsx

Like toggle

tsx

Subscribe morph

tsx

Progress fill

tsx

Two-step confirm

tsx

Play / pause

tsx

128

Vote counter

tsx

Theme toggle

tsx

Ask AI

tsx

Model picker

tsx

Thinking

tsx

Foundations

Core variants

The daily drivers: solid, soft, outline, ghost, destructive and every state in between.

14 variants

Solid

tsx

Soft

tsx

Outline

tsx

Ghost

tsx

Destructive

tsx

Success

tsx

Warning

tsx

Inverted

tsx

Pill

tsx

Sharp

tsx

Elevated

tsx

Link

tsx

Disabled

tsx

Emphasis

Gradient & glow

Saturated fills with coloured shadows that lift on hover — instant visual hierarchy for primary actions.

12 variants

Violet → Indigo

tsx

Fuchsia → Pink

tsx

Cyan → Blue

tsx

Emerald → Teal

tsx

Sunset

tsx

Midnight

tsx

Animated gradient

tsx

Conic sweep

tsx

Iridescent

tsx

Glow halo

tsx

Split glow

tsx

Radial spotlight

tsx

Light

Shimmer & shine

Sweeping highlights, metallic fills and holographic gradients. The signature look of AI-era interfaces.

8 variants

Sheen sweep

tsx

Hover shine

tsx

Metallic

tsx

Gold foil

tsx

Shimmer text

tsx

Glass shine

tsx

Holographic

tsx

Scanline

tsx

Outline

Animated borders

Conic spinners, marching dashes, travelling beams and drawn underlines — all pure CSS, no JS.

10 variants

Signature

Conic spin

tsx

Gradient ring

tsx

Marching dashes

tsx

Beam trace

tsx

Corner brackets

tsx

Pulse ring

tsx

Double ring

tsx

Border draw

tsx

Rainbow edge

tsx

Focus ring

tsx

Depth

3D & tactile

Buttons that feel physical: hard shadows that depress, neumorphic surfaces, bevels and perspective tilts.

10 variants

Hard push

tsx

Brutalist

tsx

Neumorphic

tsx

Glossy pill

tsx

Bevel

tsx

Tilt 3D

tsx

Layered stack

tsx

Jelly press

tsx

Depth inset

tsx

Lift & shadow

tsx

Retro-future

Neon & cyber

Glowing outlines, flickering signs, clipped corners, glitch overlays and terminal prompts.

8 variants

Neon outline

tsx

Neon pink

tsx

Flicker sign

tsx

Cyber clip

tsx

Terminal

tsx

Glitch hover

tsx

HUD panel

tsx

Matrix

tsx

Motion

Hover reveals

Fills that slide, circles that expand, labels that swap and icons that arrive. Every transition is transform-only.

12 variants

Slide fill

tsx

Rise fill

tsx

Circle expand

tsx

Text swap

tsx

Icon slide-in

tsx

Arrow travel

tsx

Underline grow

tsx

Split reveal

tsx

Diagonal wipe

tsx

Letter spacing

tsx

Blur focus

tsx

Background pan

tsx

Compact

Icon & shape

Circles, squares, FABs and icon pairings — with heartbeats, swings, shakes and spins on interaction.

12 variants

Icon circle

tsx

Icon square

tsx

FAB

tsx

Leading icon

tsx

Trailing icon

tsx

Play

tsx

Heartbeat

tsx

Bell swing

tsx

Download drip

tsx

Danger icon

tsx

Share pop

tsx

Close spin

tsx

Composition

Groups, splits & sizes

Segmented controls, steppers, split buttons, toolbars and the full size scale.

10 variants

Stateful

Segmented control

tsx

Stateful

Stepper

tsx

Stateful

Split button

tsx

Button group

tsx

Toolbar

tsx

Social row

tsx

Sizes

tsx

With shortcut

tsx

With counter

tsx

Full width

tsx

Buttons.

From AI generate buttons with shimmer sweeps to 3D push, neon glow, glitch overlays and stateful actions — every button is production-ready, accessible and copy-paste friendly.

108 componentsHover to copyTailwind CSSZero deps

Interactive

Stateful & AI buttons

Real React state — click them. Generate flows, copy confirmation, optimistic likes, two-step destructive confirms and AI model pickers.

12 variants

Signature

AI Generate

tsx

Copy to clipboard

tsx

Like toggle

tsx

Subscribe morph

tsx

Progress fill

tsx

Two-step confirm

tsx

Play / pause

tsx

128

Vote counter

tsx

Theme toggle

tsx

Ask AI

tsx

Model picker

tsx

Thinking

tsx

Foundations

Core variants

The daily drivers: solid, soft, outline, ghost, destructive and every state in between.

14 variants

Solid

tsx

Soft

tsx

Outline

tsx

Ghost

tsx

Destructive

tsx

Success

tsx

Warning

tsx

Inverted

tsx

Pill

tsx

Sharp

tsx

Elevated

tsx

Link

tsx

Disabled

tsx

Emphasis

Gradient & glow

Saturated fills with coloured shadows that lift on hover — instant visual hierarchy for primary actions.

12 variants

Violet → Indigo

tsx

Fuchsia → Pink

tsx

Cyan → Blue

tsx

Emerald → Teal

tsx

Sunset

tsx

Midnight

tsx

Animated gradient

tsx

Conic sweep

tsx

Iridescent

tsx

Glow halo

tsx

Split glow

tsx

Radial spotlight

tsx

Light

Shimmer & shine

Sweeping highlights, metallic fills and holographic gradients. The signature look of AI-era interfaces.

8 variants

Sheen sweep

tsx

Hover shine

tsx

Metallic

tsx

Gold foil

tsx

Shimmer text

tsx

Glass shine

tsx

Holographic

tsx

Scanline

tsx

Outline

Animated borders

Conic spinners, marching dashes, travelling beams and drawn underlines — all pure CSS, no JS.

10 variants

Signature

Conic spin

tsx

Gradient ring

tsx

Marching dashes

tsx

Beam trace

tsx

Corner brackets

tsx

Pulse ring

tsx

Double ring

tsx

Border draw

tsx

Rainbow edge

tsx

Focus ring

tsx

Depth

3D & tactile

Buttons that feel physical: hard shadows that depress, neumorphic surfaces, bevels and perspective tilts.

10 variants

Hard push

tsx

Brutalist

tsx

Neumorphic

tsx

Glossy pill

tsx

Bevel

tsx

Tilt 3D

tsx

Layered stack

tsx

Jelly press

tsx

Depth inset

tsx

Lift & shadow

tsx

Retro-future

Neon & cyber

Glowing outlines, flickering signs, clipped corners, glitch overlays and terminal prompts.

8 variants

Neon outline

tsx

Neon pink

tsx

Flicker sign

tsx

Cyber clip

tsx

Terminal

tsx

Glitch hover

tsx

HUD panel

tsx

Matrix

tsx

Motion

Hover reveals

Fills that slide, circles that expand, labels that swap and icons that arrive. Every transition is transform-only.

12 variants

Slide fill

tsx

Rise fill

tsx

Circle expand

tsx

Text swap

tsx

Icon slide-in

tsx

Arrow travel

tsx

Underline grow

tsx

Split reveal

tsx

Diagonal wipe

tsx

Letter spacing

tsx

Blur focus

tsx

Background pan

tsx

Compact

Icon & shape

Circles, squares, FABs and icon pairings — with heartbeats, swings, shakes and spins on interaction.

12 variants

Icon circle

tsx

Icon square

tsx

FAB

tsx

Leading icon

tsx

Trailing icon

tsx

Play

tsx

Heartbeat

tsx

Bell swing

tsx

Download drip

tsx

Danger icon

tsx

Share pop

tsx

Close spin

tsx

Composition

Groups, splits & sizes

Segmented controls, steppers, split buttons, toolbars and the full size scale.

10 variants

Stateful

Segmented control

tsx

Stateful

Stepper

tsx

Stateful

Split button

tsx

Button group

tsx

Toolbar

tsx

Social row

tsx

Sizes

tsx

With shortcut

tsx

With counter

tsx

Full width

tsx