Skip to content
界面图谱Interface Atlas
☰
中文
MotionMotion / Feedback

Ripple

点击涟漪

Aliases:水波纹点击涟漪波纹扩散material 点击效果涟漪动画

What is it

A translucent circle expands from the exact tap point and fades out, visualising where the press landed. Material Design's signature press feedback — it gives clicks a physical sense, like a stone dropped on water.

Interactive playground

Try it. Make an informed choice.

Loading demo…

✓ When to use

  • Buttons, list items, cards — larger tappable surfaces
  • Touch-first interfaces — fires on press, no hover needed
  • Dense lists where the hit point matters

✕ When not to use

  • Tiny icon buttons — the ripple overflows the target
  • Rapid-fire toolbars — ripples smear together
  • Components with strong press scale/shadow already

Variants

Centered

居中波纹

Expands from center, CSS-only — simplest

Pointer

触点波纹

Expands from the real tap coordinates — Material standard

Bounded vs unbounded

有界/无界

Whether the ripple clips to rounded bounds

Implementation

position: relative + overflow hiddentransform: scale(0 → 1)opacity fadepointer-events: none

On press, insert a circular span at the tap point, scale it from 0 until it covers the element while fading out, remove after 300–500ms; the parent needs position:relative plus overflow:hidden. The pointer variant requires listening to offsetX/Y — pure CSS only does the centered version. Respect prefers-reduced-motion by falling back to a simple background darken.

Agent prompts

Four prompt layers run from “what it is” all the way to a ready-to-run task. On the Agent task layer you can stack a visual style and extra requirements, then copy it to your coding agent in one click.

Add ripple feedback to the project's buttons and list items.

Check existing button components and press feedback first; avoid double feedback.
Requirements:
- Expand from the real tap point, clipped to rounded bounds
- Complete within 400ms, clean up animated nodes to avoid leaks
- No layout impact (transform + opacity only)
- Respect prefers-reduced-motion
- No new dependencies
Run existing checks when done and list modified files.

Additional requirements:
- Dark mode support
- Respect prefers-reduced-motion
- No new dependencies
- Run existing checks and list modified files

Hand to your coding agent — stack a style and extra requirements on top

Related concepts

Press Feedback按压反馈

When users press a clickable element it scales down slightly (typically 0.95–0.98) and springs back on release. A few tens of milliseconds that make a UI feel like physical buttons instead of flat web pages.

MotionSimilar
Button按钮

A clickable block that triggers one clear action — the most basic interactive element of any interface. Fill, outline and ghost styles rank primary against secondary actions; presses give instant sink-in feedback, and a busy state disables further clicks to prevent double submission.

ComponentsApplies to
Magnetic Button磁吸按钮

As the cursor approaches, the button is pulled toward it like iron to a magnet, then springs home on leave. The offset is computed from cursor-to-center distance and usually clamped to 8–20px. A tactile desktop flourish common on portfolios and creative sites.

MotionSimilar
Hover Lift悬浮上浮

On hover, a card or button lifts slightly (translateY -2–6px) while its shadow deepens — as if raised by an invisible hand. The most common desktop affordance for "this is clickable": nearly free, instantly adds depth and life.

MotionSimilar

Sources

Markdown for agents · JSON