UI components / Buttons
Shimmer Button: a React and Tailwind UI component
A pill button with a light sweep across it and a soft glow on hover.
Open the live Shimmer Button preview.
About buttons components
Buttons carry the most important action on a page, so motion here should confirm the click rather than decorate it. Keep the label short, keep the hit area at least 44 pixels tall on touch screens, and make sure the focus ring stays visible when someone tabs to it.
Install the Shimmer Button
- Create
components/ui/shimmer-button.tsxin your React + Tailwind project. - Paste the code. It only imports React; keyframes are defined inside the file.
- Import the named component where you need it. The default export is a ready-made demo you can delete.
Frequently asked questions
Is the Shimmer Button component free?
Yes. Anyone can open the live preview and copy the code.
What do I need to use it?
A React project with Tailwind CSS: Next.js, Vite, Lovable or Bolt. The file only imports React; its animations ship inside the component.
Is it accessible?
It uses native elements and ARIA attributes where needed, keeps keyboard focus visible and works without a mouse.
More buttons
- Magnetic Button: The button and its label lean toward the cursor, then spring back.
- Gradient Border Button: A rotating conic gradient traces the border; the inside stays solid.
- Confetti Button: A click bursts colourful confetti from the button, then it settles into a done state.
- Hold-to-Confirm Button: Press and hold to fill the button; letting go early cancels. Ideal for destructive actions.
- Copy Button: Copies to the clipboard; the icon morphs into a check and a small toast confirms.
- Ripple Button: Every click sends a ripple out from the exact point you pressed.