# Buttons

> Buttons, button groups and animated actions.

- [Tactile Button](https://www.assembli.design/components/tactile-button.md): A button with real travel: the face sits on a visible edge, lifts on hover and sinks into it on press with a springy release. Latches half-down with aria-pressed; disabled stays down.
- [Shortcut Button](https://www.assembli.design/components/shortcut-button.md): A button with live keycaps: pressing its chord (mod+enter, /, …) clicks it and the caps sink while held. Shows ⌘ or Ctrl per platform, sets aria-keyshortcuts and ignores bare keys while typing.
- [Icon Reveal Button](https://www.assembli.design/components/icon-reveal-button.md): Icon button that grows its label on hover or keyboard focus via an animated grid track, so any label length works. Toolbar-ready, with solid, soft, outline, ghost and destructive variants.
- [Roll Text Button](https://www.assembli.design/components/roll-text-button.md): Pill whose label rolls letter by letter on hover, each character tipping away as its twin rises in, staggered left to right. Can roll to a different word; arrow chip turns. CSS only.
- [Paper Plane Button](https://www.assembli.design/components/paper-plane-button.md): Send button whose paper plane crouches, launches out of the button on an arc with a dotted contrail, then settles into Sent with a drawn check. Waits on async onSend and shows an error state.
- [Arrow Chip Button](https://www.assembli.design/components/arrow-chip-button.md): Agency-style pill with a round arrow chip that floods the whole button on hover via a growing clip-path, while the label inverts and the arrow shoots out and reloads. Custom accent. CSS only.
- [Mesh Gradient Button](https://www.assembli.design/components/mesh-gradient-button.md): Pill made of drifting light: three blurred colour blobs wander over a base under grain and a glassy top edge; hover saturates the mesh and blooms a matching glow. Four palettes or your own.
- [Gradient Outline Button](https://www.assembli.design/components/gradient-outline-button.md): Hairline gradient outline with matching gradient ink that slowly turns; on hover the gradient pours in as a fill, the ink crossfades to white and a tinted glow lifts it. CSS only.
- [Iridescent Button](https://www.assembli.design/components/iridescent-button.md): Pearlescent foil pill: a conic rainbow, diffraction lines and a specular hotspot follow the pointer as the button tilts toward it, shifting colour like a hologram. Turns slowly at rest.
- [Border Beam Button](https://www.assembli.design/components/border-beam-button.md): A button whose hairline border is traced by a travelling beam of light, with a soft matching glow underneath. Pure transform animation, pauses for reduced motion.
- [Morph Icons](https://www.assembli.design/components/morph-icons.md): Icon buttons whose glyphs physically transform: a menu folds into a cross, play melts into pause, plus collapses into minus, a speaker grows sound waves, copy draws a tick, a chevron turns over. Path interpolation on springs, accessible toggle semantics.
- [Slide to Confirm](https://www.assembli.design/components/slide-to-confirm.md): A drag-to-confirm control: the label shimmers and fades as you pull the handle, a green fill chases it, then it settles through a loading spinner into a success state. Keyboard users get arrow and Enter support.
- [Slide-Fill Button](https://www.assembli.design/components/slide-fill-button.md): Outline button that fills from whichever edge your pointer enters and drains out the edge it leaves, with the label inverting under the fill. Direction-aware hover on springs.
- [Burst Like](https://www.assembli.design/components/burst-like.md): Like button with payoff: the heart squashes and refills, a ring flashes, ten confetti particles burst outward and the count rolls up or down; aria-pressed toggle, quiet under reduced motion.
- [Copy Button](https://www.assembli.design/components/copy-button.md): Copy-to-clipboard button whose two-sheet icon folds away as a check draws itself, with a tiny 'Copied' tooltip and a screen-reader announcement.
- [Hold to Confirm](https://www.assembli.design/components/hold-to-confirm.md): Destructive button you press and hold (pointer, touch, Space or Enter) while a fill sweeps across and the label inverts beneath it; releasing early drains it back, completion turns it green.
- [Magnetic Button](https://www.assembli.design/components/magnetic-button.md): Button with gravity: it springs toward the pointer while its label moves further for a parallax lean, squishes on press and rests still for reduced motion. Solid and outline variants.
- [Morph Submit](https://www.assembli.design/components/morph-submit.md): Async submit button that becomes its state: the pill collapses into a spinning circle, then springs back out as a green check or a shaking red error before resetting; labels blur-swap.
- [Ripple Button](https://www.assembli.design/components/ripple-button.md): Button with ink ripples that spread from the exact point you press (or the center for keyboard). Rapid presses stack ripples; each cleans itself up. Solid, soft and outline variants.
- [Shimmer Button](https://www.assembli.design/components/shimmer-button.md): Premium pill button with an inner top highlight, gradient body and a glass sheen that sweeps across on a slow loop (faster on hover). Solid and outline variants, CSS only.
- [Glow Button](https://www.assembli.design/components/glow-button.md): Pill button with a rotating conic-gradient border and a soft hover glow; customizable colors and speed, respects reduced motion.
- [Liquid Glass Button](https://www.assembli.design/components/liquid-glass-button.md): Pill button made of liquid glass: the backdrop is blurred, saturated and bent by an SVG displacement filter, lit by inset rim highlights and swept by a specular sheen on hover. Falls back to frosted glass outside Chromium.
- [Split Button](https://www.assembli.design/components/split-button.md): Primary action joined to a dropdown of alternatives, like GitHub's merge button. Choosing an option makes it the new primary action rather than running it; async actions show a spinner. Controlled or uncontrolled, built on the Base UI dropdown menu.

Back to [all components](https://www.assembli.design/components.md).