Icon Swap Button

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.

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.

A gradient button with a diagonal shine sweep animation that travels across the surface on hover, powered by GPU-composited `transform: translateX()` transitions — design-system agnostic.