悬停时按钮放大微旋转,回弹缓动像捏了一块果冻
← 返回 按钮 类特效列表上方为纯 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)}<div class="fx">
<button class="jelly">果冻按钮</button>
</div>