# button

Line Sweep Button · Aurora Teal

An outlined ghost button whose label is swept by a skewed gradient fill on hover. Rendered in the Aurora Teal palette.

68400Open

Neon Pulse Button · Candy Pink

A gradient call-to-action button with a breathing neon glow ring and a sliding arrow on hover. Rendered in the Candy Pink palette.

49400Open

Morph Icon Button · Mono Pearl

A round icon button that springs open: the burger bars morph into a close X with a rotation. Rendered in the Mono Pearl palette.

24800Open

Components⚛ TSX Live preview

Liquid ripple click button

Soft white ripples expand from the exact click point on a gradient pill, animating size and fade then self-removing.

37200Open

Animations⚛ TSX Live preview

Magnetic Hover Button

Button that magnetically follows the cursor within bounds.

Neon Pulse Button · Royal Gold

A gradient call-to-action button with a breathing neon glow ring and a sliding arrow on hover. Rendered in the Royal Gold palette.

16200Open

Morph Icon Button · Deep Indigo

A round icon button that springs open: the burger bars morph into a close X with a rotation. Rendered in the Deep Indigo palette.

17900Open

Neon Pulse Button · Mint Breeze

A gradient call-to-action button with a breathing neon glow ring and a sliding arrow on hover. Rendered in the Mint Breeze palette.

9400Open

Animations⚛ TSX Live preview

Glowing Pulse Button

Button with pulsing glow rings radiating outward.

Neon Pulse Button · Sunset Amber

A gradient call-to-action button with a breathing neon glow ring and a sliding arrow on hover. Rendered in the Sunset Amber palette.

11600Open

Morph Icon Button · Cyber Lime

A round icon button that springs open: the burger bars morph into a close X with a rotation. Rendered in the Cyber Lime palette.

81300Open

Neon Pulse Button · Rose Gold

A gradient call-to-action button with a breathing neon glow ring and a sliding arrow on hover. Rendered in the Rose Gold palette.

82600Open

Featured Components⚛ TSX Live preview

Press-and-hold confirm button

Hold the destructive button for 1.2s as a red fill sweeps across — releasing early cancels the action.

37200Open

Neon Glow Button

Primary button with neon glow, hover lift and active press effect.

Gradient Border Button

Button with animated gradient border using a rotating conic background.

Shimmer Button

Button with a diagonal light sweep shimmer across its surface on hover.

Spring Tooltip Button · Aurora Teal

A subtle button that pops a spring-animated tooltip bubble into view on hover. Rendered in the Aurora Teal palette.

35200Open

Featured Components⚛ TSX Live preview

Magnetic cursor button

A big CTA that springs toward the cursor while hovered and snaps back on leave — 35% follow ratio.

42100Open

Line Sweep Button · Crimson Heat

An outlined ghost button whose label is swept by a skewed gradient fill on hover. Rendered in the Crimson Heat palette.

41900Open

Input Group Button

Input with attached action button (e.g. copy or search).

Morphing Liquid Blob Button

Organic blob CTA whose border-radius melts and follows the cursor, with a rotating sheen on hover.

28900Open

Neon Pulse Button · Ocean Sky

A gradient call-to-action button with a breathing neon glow ring and a sliding arrow on hover. Rendered in the Ocean Sky palette.

75000Open

Icon Button Circle

Circular icon-only button with focus ring and active scale.

Loading Button State

Button that shows a spinner while busy, then success check.

Spring Tooltip Button · Sunset Amber

A subtle button that pops a spring-animated tooltip bubble into view on hover. Rendered in the Sunset Amber palette.

61700Open

Line Sweep Button · Deep Indigo

An outlined ghost button whose label is swept by a skewed gradient fill on hover. Rendered in the Deep Indigo palette.

34600Open

Featured UI Elements⚛ TSX Live preview

Neon Pulse Button · Ultra Violet

A gradient call-to-action button with a breathing neon glow ring and a sliding arrow on hover. Rendered in the Ultra Violet palette.

60400Open

Featured Components⚛ TSX Live preview

Confetti burst celebrate button

Click the button and 44 colored pieces explode outward with gravity, rotation and fade — vanilla JS physics.

46700Open

Morph Icon Button · Royal Gold

A round icon button that springs open: the burger bars morph into a close X with a rotation. Rendered in the Royal Gold palette.

57000Open

Neon CTA Button Duo

Two gradient buttons with neon glow, hover lift and press scale used side by side.

Shimmer Action Button

A primary button sweeping a diagonal light shimmer on hover.

Morph Icon Button · Aurora Teal

A round icon button that springs open: the burger bars morph into a close X with a rotation. Rendered in the Aurora Teal palette.

51700Open

Ghost Outline Button Pair

Outline and ghost button pair with hover fills and focus rings.

Components⚛ TSX Live preview

Hamburger to X morph button

Three gradient bars morph into an X with a springy cubic-bezier when toggled — the classic nav button.

35400Open

Shimmer Button with Loading → Success States

Tri-state CTA: idle, animated shimmer sweep with ellipsis dots while loading, then a morphing green ✓ success state.

27600Open

Line Sweep Button · Ocean Sky

An outlined ghost button whose label is swept by a skewed gradient fill on hover. Rendered in the Ocean Sky palette.

82900Open

Icon Button with Label

Icon-plus-label button with ripple, tooltip and disabled state.

Input Group with Attached Button

Input fused with an action button (copy/search) with shared hover state.

Loading Button States

Button cycling idle/loading/success with spinner swap and disabled guard.

Neon Pulse Button · Cyber Lime

A gradient call-to-action button with a breathing neon glow ring and a sliding arrow on hover. Rendered in the Cyber Lime palette.

40500Open

Line Sweep Button · Mint Breeze

An outlined ghost button whose label is swept by a skewed gradient fill on hover. Rendered in the Mint Breeze palette.

41700Open

Spring Tooltip Button · Rose Gold

A subtle button that pops a spring-animated tooltip bubble into view on hover. Rendered in the Rose Gold palette.

84100Open

Split Button with Dropdown

Primary split button revealing secondary actions in a dropdown.

Morph Icon Button · Candy Pink

A round icon button that springs open: the burger bars morph into a close X with a rotation. Rendered in the Candy Pink palette.

12200Open

Animations⚛ TSX Live preview

Rotating Conic Gradient Border Button

A CTA wrapped in an animated conic-gradient ring rotating via @property — with a cyan colorway variant.

25400Open

Morph Icon Button · Crimson Heat

A round icon button that springs open: the burger bars morph into a close X with a rotation. Rendered in the Crimson Heat palette.

43400Open

Spring Tooltip Button · Mono Pearl

A subtle button that pops a spring-animated tooltip bubble into view on hover. Rendered in the Mono Pearl palette.

10900Open

Stroke-draw success checkmark

On action the button draws a circle then a check via stroke-dashoffset animation and tints green — completion feedback.

35800Open

Spring Tooltip Button · Deep Indigo

A subtle button that pops a spring-animated tooltip bubble into view on hover. Rendered in the Deep Indigo palette.

53800Open

Morph Icon Button · Ultra Violet

A round icon button that springs open: the burger bars morph into a close X with a rotation. Rendered in the Ultra Violet palette.