Back to Motion Prompt examples
Landing page & web effects · #13
Ripple effect
A ripple spreads from the point that was pressed. Each click sends a white circle out from the click point to fill the button, then it fades away.
Hover & click interactionsrippleink-ripplematerialclicktapfeedbackbutton
Full motion specification
How the movement works
Use it to confirm a press on a button or list item right where it happened.
- 01Button 280 × 56 (orange, radius 10). Clicks at 0.7 s (left of centre) and 2.9 s (right of centre).
- 02The circle is centred on the click point; its radius grows from 0 to the distance to the button's farthest corner over 0.6 s (cubic ease-out).
- 03White at 0.4 opacity, fading to 0 between 0.3 and 0.8 s after the click.
- 04The circle is clipped to the button (overflow: hidden); the label sits above it.
Prompt
Add a ripple effect to the submit button: a white circle spreads from the click point and fades in 0.6 s.