悬停上浮按钮
最经典的按钮特效：鼠标悬停时按钮上浮 + 阴影加深。原理是 transition 配合 :hover 伪类改变 transform: translateY 和 box-shadow，整个交互零 JS。
上浮幅度不要太大（-4px ~ -8px 足够），阴影要从“贴地小阴影”变“弥散大阴影”，看起来才有“浮起来”的立体感。
- translateY(-6px) 上浮；阴影从 0 2px 8px 加深到 0 12px 24px
- 加 :active 按压反馈：translateY(-2px)，按下时回弹一点
- 圆角、主色按钮加 cursor: pointer 提示可点
HTML
<style> .btn { padding: 12px 32px; border: none; border-radius: 10px; background: #4a9eff; color: #fff; font-size: 15px; cursor: pointer; box-shadow: 0 3px 10px rgba(74,158,255,.35); transition: transform .25s ease, box-shadow .25s ease; } .btn:hover { transform: translateY(-6px); box-shadow: 0 14px 28px rgba(74,158,255,.45); } .btn:active { transform: translateY(-2px); } .wrapbtn { text-align: center; padding: 40px 0; } </style> <div class="wrapbtn"> <button class="btn">悬停我看看</button> <button class="btn" style="background:#f778ba;box-shadow:0 3px 10px rgba(247,120,186,.35)">粉色按钮</button> </div>
本节要点上浮按钮 = translateY 上移 + 阴影扩散；用 :active 加按压感。
