OneTaskBy Tim King · Updated
Ripple Effect
Press Animation Radius, Colour and Speed Settings With Copyable Pure HTML and CSS
OneTask is free, with no sign-up, and built by one person.
If this tool saved you time, a coffee helps keep new ones coming.
How the Ripple Effect works
This ripple effect generator builds a button that sends a soft circle spreading outwards each time it is pressed, like the touch feedback in Material Design. Choose the colours, corners and speed, press the button in the preview and copy the HTML and CSS.
A ripple gives instant visual feedback that a tap or click has landed, which matters most on touch screens where there is no hover state. This version needs no script at all.
How the ripple effect works
The ripple is a radial-gradient circle on the button's ::after layer. At rest it is scaled up ten
times and fully transparent. While the button is held, :active snaps it to scale 0 with no
transition; when you let go, the transition grows it back out and fades it, which is the ripple you see.
Choosing colours
A white ripple suits dark or saturated buttons, and a dark ripple with the same low opacity suits light ones. The ripple is drawn at 45 percent opacity before it fades, so even a strong colour stays subtle on top of the button.
FAQ
Does the CSS ripple start where I click?
No. A pure CSS ripple always spreads from the centre of the button, because CSS cannot read the pointer position. Starting it under the finger needs a few lines of JavaScript to set the origin on each click.
Will the ripple work on links and other elements?
Yes. Give any element position: relative and overflow: hidden, then copy the ::after and :active rules to its class. It works on links, cards and list items as well as buttons.
Why does nothing happen when I tap on my phone?
Some mobile browsers only apply :active if the page has a touch listener. Adding an empty ontouchstart="" attribute to the body is the long-standing fix and makes the ripple show on tap.
See also: all Shadows & Motion tools, Layout & Spacing, Shapes & SVG, UI Components, Forms & Inputs, Colour.
Related tools
CSS Button Generator
Design a button with hover, focus and disabled states.
Magnetic Button
Build a button that is pulled toward the cursor as it approaches.
Glass Button Builder
Frosted glass buttons with glow, lift and a shine sweep.
Hover Effect Builder
Build animated hover effects for buttons and links.
CSS Pulse Animation
A pulsing ring around a button or a live status dot.