FancyUI
Saved GitHub Get started
Button — ripple at touch — preview

Button — ripple at touch

FancyUI FANCYUI

The ripple starts where you pressed, so the button acknowledges the exact contact.

#minimal#physical#press

Open docs

Use in FancyUI

Type
Interaction
Interaction
Press
Style
Minimal, Physical
Code availability
Open source

Why it works

The ripple's origin is the contact point, not the centre, so the button answers the finger or cursor where it landed. Keyboard activation ripples from the centre, so every input gets the same acknowledgement.

When to use it

Dense, touch-first controls where a press needs visible confirmation.

Things to watch

Reduced motion is honoured in CSS. The ripple colour must contrast with the button face, or it is invisible. Each ripple cleans itself up on `animationend`.

Implementation clues

  • clientX/Y → origin
  • scale keyframe
  • cleanup on animationend
  • keyboard = centre