点击水波纹按钮

Ripple Button

初级通用

手指（或鼠标）点在按钮的哪个位置，就从哪里冒出一圈波纹向外扩散、淡出。这是 Material Design 的经典点击反馈，让用户确信「点到了」，在手机上尤其有用。

你可能会说：「按钮点下去没什么反应，能不能做成安卓那种点哪里就从哪里冒出波纹的效果？」

效果预览点哪里，波纹就从哪里散开

正在加载演示…

怎么做3 步做出来

按钮裁掉溢出的波纹

按钮要 position: relative 和 overflow: hidden，波纹才能以按钮为参照定位，并被裁在按钮里面。波纹本身是一个从 0 放大到 1、同时淡出的圆。

查看代码css

.ripple-btn {
  position: relative;
  overflow: hidden;
}
.ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.45); /* 浅色按钮上改成半透明深色 */
  transform: scale(0);
  pointer-events: none;
  animation: ripple 0.6s linear forwards;
}
@keyframes ripple {
  to { transform: scale(1); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .ripple { display: none; }
}

在点击位置生成波纹

按下时算出点击点相对按钮的坐标，生成一个圆，直径取按钮对角线的两倍，保证无论点在角落还是中间，波纹都能盖满整个按钮。动画结束后把这个圆删掉，不然点多了会堆一堆元素。用 pointerdown 而不是 click，按下瞬间就有反馈。

查看代码js

document.querySelectorAll('.ripple-btn').forEach((button) => {
  button.addEventListener('pointerdown', (event) => {
    const box = button.getBoundingClientRect();
    const size = Math.hypot(box.width, box.height) * 2;
    const ripple = document.createElement('span');
    ripple.className = 'ripple';
    ripple.style.width = ripple.style.height = `${size}px`;
    ripple.style.left = `${event.clientX - box.left - size / 2}px`;
    ripple.style.top = `${event.clientY - box.top - size / 2}px`;
    button.appendChild(ripple);
    ripple.addEventListener('animationend', () => ripple.remove());
  });
});

3
按钮里的文字放在波纹上面
波纹是后插进按钮的，会盖在文字上面。给按钮里的文字和图标加 position: relative，它们就会排在波纹之上，不会被波纹染色。
查看代码收起代码css
```
.ripple-btn > span,
.ripple-btn > svg {
  position: relative;
}
```

适合放在哪

适合用

手机网页、小程序里的主要按钮和列表项，点击反馈要明显。
采用 Material 风格的后台或工具产品。
图标按钮（收藏、分享），点击区域小，更需要反馈。

不适合用

设计风格偏极简、安静的网站，波纹可能显得突兀；用轻微的按下变暗即可。
链接文字别加波纹；文字链接点击后通常直接跳转，用户看不到波纹。
页面已经用了组件库（如 Material UI）自带的波纹时，别再自己叠一层。

让 AI 帮你做复制给 AI Agent 直接用

请给【需要点击反馈的按钮，如：项目里的通用 Button 组件】加上点击水波纹效果。先阅读按钮组件和样式写法，确认按钮有哪些变体（实心、描边、图标按钮），以及组件库是否已自带波纹。要求：按钮 position: relative + overflow: hidden；pointerdown 时在点击位置生成圆形波纹，直径取按钮对角线的两倍，从 0 放大到 1 并淡出（约 0.6 秒），动画结束后移除元素；实心按钮用半透明白色、浅色按钮用半透明深色；按钮内的文字和图标在波纹之上；开启减少动效时不显示波纹。按钮原有的禁用、聚焦样式和点击行为不变。不改无关代码。最后说明怎样验证：快速连点不会残留元素。

用到的知识

按钮微交互关键帧按下