按住按钮时水波从中心扩散淡出， Material 风格反馈
← 返回 按钮 类特效列表上方为纯 CSS 实时演示，直接将鼠标移上去 / 点击感受效果
.fx .ripple{position:relative;overflow:hidden;display:block;width:200px;margin:50px auto;padding:14px 0;background:#4a9eff;color:#fff;border:none;border-radius:10px;font-size:16px;cursor:pointer}
.fx .ripple::after{content:"";position:absolute;left:50%;top:50%;width:120px;height:120px;margin:-60px 0 0 -60px;border-radius:50%;background:rgba(255,255,255,.5);transform:scale(0);opacity:1;pointer-events:none}
.fx .ripple:active::after{animation:kfx-rip .6s ease-out forwards}
@keyframes kfx-rip{to{transform:scale(2.5);opacity:0}}<div class="fx">
<button class="ripple">按住看水波</button>
</div>