Ripple click button
A soft wave spreads out from the exact spot where you click or tap the button.
Settings
Code
<button class="uv-ripple">Click me</button>Prompt for AI
Paste it into ChatGPT, Claude or Cursor and it will adapt the block to your project with these settings, even if you don’t use React.
More in Buttons
Where to use it
The ripple effect gives instant feedback on press, which matters in web apps people use with their thumbs: “Add to cart” in a food delivery app, “Save” in a notes tool or the filters of a booking dashboard. If you know Material Design, the click ripple on a button will feel familiar. It uses a few lines of JavaScript.
Unlike hover effects, this one works just as well on phones, since it reacts to the tap itself. Very light button colors make the white wave hard to see, so give it a mid or dark tone. Keep the speed low for a calmer, more premium feel.