Solid, outline, ghost, gradient and glow — every state included.
A button is the most-clicked element you will ship and the one most often shipped with three of its five states missing. Everything here defines hover, active, focus-visible and disabled, not just the resting state, because a button that only looks right at rest is a button that feels broken under the cursor.
A button whose multi-color gradient slides across on hover, paired with a soft drop shadow that intensifies.
A bordered button with a soft cyan halo that fully ignites into a glowing pill on hover.
A chunky button with a solid drop-shadow base that compresses when pressed for a satisfying tactile feel.
A ghost button that fills from left to right with a solid color on hover, with the text color flipping in sync.
Minimal text button whose top and bottom borders sweep in from opposite directions on hover.
A pill button with two concentric rings that continuously pulse outward, calling attention without motion noise.
A teal wave rises from the bottom and floods the button on hover, with the text color flipping to white.
A dark button surrounded by a rotating conic-gradient beam that traces its border like a comet.
A deep-indigo button that ignites layered indigo glows on hover for an electric, almost magnetic presence.
A warm amber button whose trailing arrow nudges right on hover, suggesting forward motion.
A dark button with a skewed highlight band that sweeps across its surface on hover, like light catching glass.
Solid blue button with a soft glow shadow and lift-on-hover.
Diagonal ocean gradient that slides across on hover, with lift and shadow.
Outline blue button that fills from left to right on hover.
Blue button that emits a soft pulsing glow ring on an infinite loop.
Ocean gradient button with a diagonal light sheen that sweeps across on hover.
Pill button with a pulsing dot indicator and ocean gradient body.
Ocean CTA with a lit top edge and a highlight that sweeps across on a slow loop.
Ghost button with a true 1px ocean gradient border — masked, so every corner radius stays clean.
Translucent button lit from above, picking up a blue edge and halo on hover.
The standard product CTA: ocean fill, and the arrow eases forward on hover.
The pending state a submit button needs: blue tint, inline spinner, progress cursor.
Busy-state ocean button with an inline ring spinner and a breathing label.
Primary action joined to its own caret segment by an inset rule, so the dropdown half is a separate target rather than a wider button.
Showing 24 of 63. Search the rest →
What happens under the cursor, across inputs, links and tiles.
Layered shadows that read as light rather than as a border.
Gradient outlines, running lights, dashes and glow rings.
Customer logo rows, marquees and greyscale-on-hover grids.
Two faces, one element, rotated on hover or focus.
Gradients, waves, particles and meshes that move without JavaScript.