果冻弹性按钮 · 按钮
前端Wiki/CSS 特效合集/果冻弹性按钮

果冻弹性按钮

悬停时按钮放大微旋转,回弹缓动像捏了一块果冻

← 返回 按钮 类特效列表

上方为纯 CSS 实时演示,直接将鼠标移上去 / 点击感受效果

CSS 代码

CSS
.fx .jelly{display:block;width:170px;margin:46px auto;padding:14px 0;text-align:center;border:none;border-radius:16px;background:linear-gradient(135deg,#f778ba,#a371f7);color:#fff;font-size:16px;font-weight:700;cursor:pointer;transition:transform .4s cubic-bezier(.36,1.8,.4,1)}
.fx .jelly:hover{transform:scale(1.12) rotate(-2deg)}
.fx .jelly:active{transform:scale(.9)}

HTML 结构

HTML
<div class="fx">
<button class="jelly">果冻按钮</button>
</div>
实现要点:弹性 = 过冲缓动 cubic-bezier(.36,1.8,.4,1);:active 缩小形成反差

其它按钮类特效

回到 前端Wiki 首页 · CSS 特效合集