Keycap Buttons

A minimal uppercase text button whose accent outline grows from zero at the top-left corner on hover, changing from a gray idle border to an accent border at a consistent weight.

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.

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.