BUTTON
涟漪按钮Ripple Button
手指点在哪，一圈水波就从哪扩散开——Material Design 的标志性触觉反馈。
效果预览
适合用在哪
移动端优先的产品、Material 风格站点、需要强触觉反馈的场景。
容易踩的坑
- 动画结束不移除 span 节点，频繁点击后 DOM 中堆积上百个涟漪元素。
- 涟漪从按钮中心扩散而不是按压点，丢失物理感，看起来像普通闪烁。
- 浅色描边按钮仍用白色涟漪，几乎不可见，等于没有点击反馈。
设计提示词 · Prompt
涟漪按钮（Ripple Button）：点击时在按压坐标插入一个绝对定位的圆形 span（初始 8px、背景 rgba(255,255,255,.5)），动画让它的 scale 从 0 扩到按钮对角线的 2 倍以上、opacity 从 .9 到 0，600ms ease-out 后移除节点。按钮 overflow:hidden 裁掉溢出。注意涟漪中心必须是按压点而不是按钮中心——这是"物理感"的关键。深色或彩色实心按钮上用白色涟漪；浅色描边按钮上用主题色涟漪。
Ripple Button: on click, insert an absolutely positioned circular span at the press coordinates (initially 8px, background rgba(255,255,255,.5)); animate its scale from 0 to more than 2x the button diagonal and opacity from .9 to 0, removing the node after 600ms ease-out. The button uses overflow:hidden to clip the overflow. Note that the ripple center must be the press point, not the button center — this is the key to the "physical feel". Use a white ripple on dark or colored solid buttons; use a theme-color ripple on light outlined buttons.
常见搭配
同一页面里经常和「涟漪按钮」一起出现的模式，可以收藏后用「组合收藏为整页提示词」一起交给 AI。
演示 HTML 结构
<div class="s d-rippledemo"> <button class="d-ripplebtn">点我有一圈涟漪</button> </div>