直接用 :hover 配合 transform: scale() 实现按钮平滑放大，需加 transition: transform 0.2s ease 且设在默认状态；注意 transform-origin 控制缩放原点，热区不变需配合 padding 调整。
hover 时用 transform: scale() 放大按钮
直接给按钮加 :hover 伪类配合 transform: scale() 就能实现平滑放大，比改 width/height 更性能友好，也不会影响布局流。
常见错误是没设 transition，导致放大“啪”一下跳变；或者用了 scale(0) 或负值，让按钮消失或翻转——其实多数场景只需要 scale(1.05) 到 scale(1.2) 这种轻微放大。
- 必须加
transition: transform 0.2s ease;（时间建议 0.15s–0.3s，太长拖沓，太短像抽搐） - 推荐写在默认状态上，不是
:hover里，避免鼠标移出时无过渡 - 如果按钮内有文字，放大后文字也会跟着变大，若想保持文字大小不变，得单独对
span或text层级反向缩放（不推荐，增加复杂度）
scale 放大后按钮位置偏移怎么办
transform: scale() 默认以元素中心为原点缩放，但按钮常靠左/右浮动或 inline 布局，放大后容易“抖动”或挤开旁边元素。这不是 bug，是缩放后占据空间仍按原始尺寸计算，视觉上却变大了。
解决核心是控制变换原点（transform-origin）或用 will-change: transform 提前提示浏览器优化渲染。
- 对居中按钮，保持默认
transform-origin: center即可 - 对左对齐按钮，加
transform-origin: left center;，避免左边“弹出去” - 如果按钮在 flex 容器里且放大后错位，检查父容器是否设了
align-items: flex-start—— 缩放后高度变化可能触发重新对齐 - 极少数老版本 Safari 需要加
-webkit-transform前缀，但现代项目基本不用了
按钮放大后点击热区没同步变大？
这是最容易被忽略的点：transform 只影响渲染层，不改变元素的布局盒（layout box）和事件热区（hit area）。也就是说，你看到按钮变大了，但实际可点击区域还是原来那么大。
根本原因在于 CSS transform 不会触发布局重排（reflow），只走合成层（compositor layer），所以点击检测仍基于原始尺寸。
- 如果必须扩大热区，得配合调整
padding或min-width/min-height，而不是只依赖scale() - 更稳妥的做法：把
scale()和padding变化一起做，比如 hover 时padding: 8px 16px → 10px 20px，再叠加scale(1.1) - 不要用
zoom替代 —— 已废弃、不标准、兼容性差，且同样不扩大热区
React/Vue 中动态控制 scale 值
框架里别直接操作 DOM style，而是用 class 切换或内联 style 绑定。关键是 scale 值别硬编码，留出调节余地。
例如 React 中用 state 控制缩放级别，适合做交互反馈（如点击后短暂放大再复位），但注意不要在 render 里反复创建新对象引发重渲染。
- 推荐用 className + CSS 变量：
style={{ '--scale': isHovered ? '1.15' : '1' }}，CSS 里写transform: scale(var(--scale)); - Vue 模板中可用
:class="{ 'btn-hovered': isHovered }"，然后在样式里定义.btn-hovered { transform: scale(1.1); } - 避免在循环列表中每个按钮都监听
onMouseEnter—— 用事件委托或 CSS:hover更轻量
实际效果好不好，关键不在 scale 数值多大，而在于 transition 时间和原点是否匹配你的布局上下文。很多“放大抖动”问题，调一行 transform-origin 就解决了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
