Animated Update Progress Button

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.

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 bordered button that jumps to warp speed on hover — a rotating gradient ring, two parallax layers of light-streaks scrolling past, a one-shot jump-flash, and a "Launch" → "Ready" warp text-swap. All driven by CSS hover and focus states, fully design-system agnostic.

A gradient accent circle with a contrasting 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 button that erases its idle label character by character and types in a confirmation label, with a blinking cursor that tracks the end of the visible text and a gradient border that draws around the button on hover.

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.