动画 · 悬停与焦点 · 15

按钮涟漪

按钮涟漪 = 从点击处扩散的圆形波纹，以材质化风格确认这次点击已被接收。

尊重 prefers-reduced-motion：动画关闭，仅保留终态。

怎么向 AI 描述它

Add a button ripple: a circular element scales from 1 to 16 and fades out on click, transform and opacity only.

Shift the ripple origin to the bottom-right corner and slow it to a 2.4s ease so it reads as a soft glow rather than a tap.

Spawn the ripple at the exact pointer coordinates on click (set --ripple-x/--ripple-y from the event), cap concurrent ripples, and under prefers-reduced-motion swap to a 120ms background darken. Never animate the button's width or height.

修改类 Prompt 只动目标，不碰页面其余部分。

按钮涟漪是什么？

涟漪把一次点击变成能「感觉」到的反馈。一圈淡纹从按压点绽开、边放大边淡出，像 Material 按钮那样回应点击。保持克制而迅速——拖泥带水的涟漪会被误读成加载圈而非反馈。

动画标本

触发: click
技术: css
时长: 1.8s
缓动: ease-out
性能: transform, opacity

什么时候用

Confirming a tap on primary / icon buttons
Material or tactile design languages

什么时候别用

On text links — ripples belong on filled controls
When the action already shows a spinner

Origin the ripple at the pointer, not the centre — it feels far more physical.

获取代码

.anim-el {
  animation-iteration-count: infinite;
  animation-fill-mode: both;
}
:root { --anim-accent: #6d5efc; }

.ripple-btn {
  position: relative;
  overflow: hidden;
  border: 0;
  border-radius: 12px;
  padding: 14px 26px;
  font: 600 15px/1 'Plus Jakarta Sans', system-ui, sans-serif;
  color: #fff;
  background: var(--anim-accent);
  cursor: pointer;
}
.ripple-btn .ripple-dot {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 12px;
  height: 12px;
  margin: -6px 0 0 -6px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.6);
  animation-name: ripple;
  animation-duration: var(--anim-duration, 1.8s);
  animation-timing-function: var(--anim-easing, ease-out);
}
@keyframes ripple {
  0% { transform: scale(1); opacity: 0.55; }
  100% { transform: scale(16); opacity: 0; }
}

<button class="ripple-btn">Click<span class="ripple-dot anim-el"></span></button>

复制后即可用于你的项目。动效仅作用于 transform / opacity；颜色取自 --anim-accent。

另见

风格

极简→

主题

AI SaaS 落地页→

组件

按钮→

按钮涟漪

按钮涟漪是什么？

动画标本

什么时候用

什么时候别用

另见

组件

动画

风格

主题

Prompt

术语

反模式

按钮涟漪

按钮涟漪是什么？

动画 标本

什么时候用

什么时候别用

另见

动画标本