This writes the code for the ripple that spreads when a button is pressed. Enter a color, opacity, spread size and duration, pick either the pure-CSS route or the JavaScript route, and try it on the preview button above.
The pure-CSS route puts a circle on ::after and grows its scale from 0 to 1 while :active. Because CSS cannot read pointer coordinates, the spread always starts at the center of the element. The JS route creates one circle at the click point and removes it when the animation ends. Both need position: relative and overflow: hidden on the element. The definitions follow the W3C CSS Transitions and Animations specifications (as of October 2026).
No recommended duration or curve is offered; whatever you enter is written verbatim. In the pure-CSS route the ripple disappears the moment the press ends, and a lingering held-down state is not supported. To respect a reduced-motion preference, add a prefers-reduced-motion block of your own.
Frequently asked questions
No. CSS has no access to pointer coordinates, so only a center-origin spread is possible. Pick the JS mode when you need the click point.
The ripple circle grows larger than the element. Without overflow: hidden it spills past the button and covers the surrounding layout.
This tool offers no recommendation. It writes whatever you enter, and the right length depends on the button size and the product.