# 16 Animated React Button Components for Tailwind

> Buttons with character: magnetic hover, shimmer sweeps, travelling border beams, hold-to-confirm, async loading-to-success morphs, confetti bursts, ripples and slide-to-unlock. Built with Motion springs and fully keyboard accessible.

3 of 16 free (the rest with PixelPapa Pro), built with Tailwind CSS and Motion, installable with the shadcn CLI.

- [Button 3D Press](https://pixelpapa.com/components/buttons/button-3d-press.md): A raised key with a real edge and cast shadow: it lifts slightly on hover, sinks hard on press and bounces back on release.
- [Button Async States](https://pixelpapa.com/components/buttons/button-async-states.md) (Pro): Runs a promise and morphs through idle, a collapsed spinner, then a success or error label, animating its width between each.
- [Button Border Beam](https://pixelpapa.com/components/buttons/button-border-beam.md) (Pro): A comet of light laps the button's border on a loop, with a soft halo that follows the head of the beam.
- [Button Confetti Burst](https://pixelpapa.com/components/buttons/button-confetti-burst.md) (Pro): Throws a fan of DOM confetti from the exact point you clicked; pieces arc up, tumble and fall under gravity. No canvas.
- [Button Copy Feedback](https://pixelpapa.com/components/buttons/button-copy-feedback.md) (Pro): Copies a value to the clipboard, then swaps its icon for a drawn check and rolls the label to "Copied" before settling back.
- [Button Gradient Border Glow](https://pixelpapa.com/components/buttons/button-gradient-border-glow.md) (Pro): A flowing gradient outline with a blurred twin underneath; the glow brightens on hover and leans toward the cursor.
- [Button Group Segmented](https://pixelpapa.com/components/buttons/button-group-segmented.md) (Pro): A segmented control whose pill stretches like jelly: its leading edge races ahead and the trailing edge catches up on a softer spring.
- [Button Hold To Confirm](https://pixelpapa.com/components/buttons/button-hold-to-confirm.md) (Pro): Press and hold to wipe a solid fill across the button; release early and it springs back, hold to the end and it confirms.
- [Button Icon Reveal](https://pixelpapa.com/components/buttons/button-icon-reveal.md) (Pro): On hover the label slides aside and an icon glides into the space it leaves, or an existing icon exits and re-enters like a conveyor. The button never changes width.
- [Button Like Counter](https://pixelpapa.com/components/buttons/button-like-counter.md) (Pro): A like button whose heart pops with a ring and spark burst while the count rolls digit by digit, odometer style.
- [Button Liquid Fill](https://pixelpapa.com/components/buttons/button-liquid-fill.md) (Pro): Colour floods the button from the exact point the pointer enters and drains toward the point it leaves, inverting the label at the waterline.
- [Button Ripple](https://pixelpapa.com/components/buttons/button-ripple.md) (Pro): An ink ripple grows from the exact press point to the farthest corner and fades, with overlapping ripples for rapid taps.
- [Button Shimmer Sweep](https://pixelpapa.com/components/buttons/button-shimmer-sweep.md): A slanted band of light crosses the button on a slow loop and fires again, faster, the moment you hover.
- [Button Slide To Unlock](https://pixelpapa.com/components/buttons/button-slide-to-unlock.md) (Pro): Drag the thumb across a shimmering track to confirm; it springs home if released early and locks in with a check at the end.
- [Button Split Dropdown](https://pixelpapa.com/components/buttons/button-split-dropdown.md) (Pro): A primary action joined to a chevron that opens a springy menu; picking a mode rolls the main label to the new action.
- [Magnetic Button](https://pixelpapa.com/components/buttons/magnetic-button.md): A button that leans toward the cursor with spring physics and snaps back on leave.