UI components / Buttons
Ripple Button: a React and Tailwind UI component
Every click sends a ripple out from the exact point you pressed.
Open the live Ripple 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 Ripple Button
- Create
components/ui/ripple-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 Ripple Button component free?
Anyone can open the live preview. Copying the code is included with a Scrollhaus plan.
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
- Shimmer Button: A pill button with a light sweep across it and a soft glow on hover.
- 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.