← All elements
<button class="rp">Tap me</button>About this button
A button with a Material-style ripple on press, using a radial-gradient background that scales out on :active.
How it works
The button has a radial-gradient background that is a faint white circle with a size of 0 percent. On :active the background-size jumps to 1500 percent with no transition, so the circle fills the button instantly and the transition then eases it back when released, which looks like a ripple when you press and release.
Ways to customise it
- Change the base colour #4f46e5.
- Edit the white circle opacity in the gradient.
- Change the 0.5s release transition.
Good to know
It is a real button, with the usual keyboard support. This ripple always starts from the centre. A ripple from the click point needs script.
Open an example, copy the HTML and the CSS, and paste them into your page. There is nothing to install and no JavaScript to load.