Flip Button

A gradient pill button where the text label slides up and a download icon slides in from below on hover — driven entirely by GPU-composited `translateY` transitions with no layout recalculation.

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.

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.

Square social icon buttons with a 3D flip animation on hover — each icon sits in a rounded-square button that inverts its background and rotates the icon 360 degrees via a rotateY transform, fully token-driven and design-system agnostic.