Shine Button

An outlined button with a gradient border that sweeps diagonally from corner to corner on hover using a single clip-path transition and glow box-shadow — pure CSS, no JavaScript required for the effect.

A pill button with a primary-color gradient circle badge that inverts on hover with a diagonal arrow slide animation — pure CSS transitions, no keyframes required.

An amethyst gradient circle with a white chevron arrow that expands into a full pill on hover, sweeping under the label — a faithful port of the original circle-expand button, animated with GPU-friendly `clip-path` + `transform: scaleX()` instead of a width transition.

A 3D card-flip button that rotates on hover to reveal a confirmation state using CSS perspective and `rotateY(180deg)` transform — fully design-system agnostic.