Appearance
点击涟漪 Ripple
点击按钮时产生从中心向外扩散的涟漪效果，纯CSS实现。
实时预览
代码
css
.btn-ripple {
--ripple-color: #00cec9;
position: relative;
padding: 14px 36px;
border: 2px solid var(--ripple-color);
border-radius: 8px;
background: transparent;
color: var(--ripple-color);
cursor: pointer;
overflow: hidden;
}
.btn-ripple::after {
content: '';
position: absolute;
top: 50%; left: 50%;
width: 0; height: 0;
border-radius: 50%;
background: rgba(0, 206, 201, 0.3);
transform: translate(-50%, -50%);
transition: width 0.5s ease, height 0.5s ease, opacity 0.5s ease;
opacity: 0;
}
.btn-ripple:active::after {
width: 300px; height: 300px;
opacity: 1;
}html
<button class="btn-ripple">Click Ripple</button>纯 CSS 实现的点击涟漪按钮动效——通过伪元素、过渡和变换让按钮在悬停和点击时产生视觉反馈。提升用户的操作感知和页面的交互品质，完全不需要 JavaScript。
快速使用
- 复制 CSS 代码到你的样式文件中
- 在按钮元素上添加对应的 class 名称
- 调整颜色变量（如
--ripple-color）以匹配你的品牌色 - 确保按钮设置了
cursor: pointer和合适的点击区域
使用场景
- CTA 主要按钮：发光或脉冲效果引导用户点击
- 表单提交按钮：点击涟漪或 3D 按压提供即时的触觉反馈
- 悬停操作按钮：边框填充或下划线扫过暗示可交互性
- 危险/警告操作：抖动效果提示用户确认重要操作
常见问题
Q: 按钮动效会影响点击区域吗？ A: 使用 transform: scale() 不会改变元素的布局尺寸，不影响点击区域。如果是 padding 或 width/height 变化，建议预留足够的点击热区（至少 44x44px）。
Q: 移动端按钮需要有按下的视觉反馈吗？ A: 强烈建议。用 :active 伪类实现按压反馈（scale(0.95) 或 translateY(2px)），让用户知道"已经点到了"。触摸屏没有 hover，active 是唯一的纯 CSS 反馈机制。
Q: 按钮动画会影响表单提交吗？ A: CSS 动画不会阻止表单提交。但如果用 animation-delay 或过长 animation-duration，按钮可能在动画期间看起来不可点击。建议动画时长不超过 0.5s。
浏览器兼容性
| 浏览器 | 兼容性 |
|---|---|
| Chrome / Edge | ✅ 完全支持 |
| Firefox | ✅ 完全支持 |
| Safari | ✅ 完全支持 |
| 移动端浏览器 | ✅ 完全支持 |
| IE 11 | ⚠️ 伪元素和 transform 基本可用，高级效果需降级 |
使用说明
| 属性 | 说明 |
|---|---|
--ripple-color | 涟漪颜色，同时用于边框和文字 |
:active | 仅在点击瞬间触发效果 |
width/height: 0 → 300px | 圆圈从无到大扩散 |
opacity | 配合尺寸变化产生渐入渐出 |
transform: translate(-50%,-50%) | 确保涟漪从按钮正中心扩散 |