应使用明确类名（如.btn-scale）而非全局button样式，配合transform: scale(1)、transition优化及data-scale属性实现可维护缩放；需修复文字模糊、阴影偏移、移动端反馈等问题。
统一设置按钮 hover 缩放比例的 CSS 类名方案
直接给所有 <button></button> 元素加全局缩放样式风险高，容易误伤表单控件、禁用按钮或第三方组件。更稳妥的做法是定义一个明确的类名（如 .btn-scale），再批量应用到需要缩放的按钮上。
示例写法：
.btn-scale {
transform: scale(1);
transition: transform 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.btn-scale:hover {
transform: scale(1.12);
}
- 必须显式声明
transform: scale(1)，否则首次 hover 可能闪一下 - 过渡时间控制在
0.2s–0.35s区间最自然；过长像卡顿，过短像弹跳 - 避免用
transition: all，它会把后续 JS 动态改的color或opacity也拖慢 - 如果按钮有圆角或阴影，放大后边缘可能被父容器裁切，检查父级是否设了
overflow: hidden
用 CSS 自定义属性动态控制缩放比
当项目中存在多组按钮（比如主操作按钮缩放 1.15x，次要按钮缩放 1.08x），硬编码多个类太难维护。用 CSS 变量可集中管理缩放值。
基础写法：
button[data-scale] {
--scale-ratio: 1;
transform: scale(var(--scale-ratio));
transition: transform 0.25s ease;
}
button[data-scale]:hover {
--scale-ratio: attr(data-scale) / 100;
/* 注意：data-scale="115" → 缩放 1.15 */
}
- HTML 中写
<button data-scale="112">提交</button> - 变量值需为数字，
attr()取出后要除以 100 才能转成小数，否则scale(112)会放大 112 倍 - 不推荐用
:root定义全局--scale-ratio，因为无法按按钮类型差异化 - 该方案在 Safari 15.4+ 和 Chrome 93+ 稳定支持，IE 完全不支持，需降级 fallback
缩放后文字模糊、阴影错位的修复要点
transform: scale() 放大时触发亚像素渲染，尤其在 macOS + Chrome 组合下，文字边缘发虚、box-shadow 偏移量失真很常见。
- 加
will-change: transform到常态样式，提前启用 GPU 渲染（但别滥用，每个按钮都加会增加内存开销） - 阴影同步缩放：hover 时别只改
transform，也要调box-shadow的模糊半径，例如从4px改为5px - 避免
transform-origin: top left配合大缩放比（如 1.3x），容易让文字贴边溢出，优先用center - 若按钮内含图标（如 SVG），确保其
width/height是固定值或em单位，否则缩放后图标可能拉伸变形
移动端点击反馈不能只靠 :hover
纯 :hover 在 iOS Safari 和多数安卓浏览器里不可靠——手指划过不触发，点下去又立刻消失，用户根本感觉不到反馈。
- 对触屏设备，必须补充
:active样式：button:active { transform: scale(0.97); } - 不要删掉
:hover，PC 端仍需保留；可用媒体查询隔离：@media (hover: hover) { .btn-scale:hover { ... } } - 如果按钮有 JS 绑定 click 事件，建议在
touchstart时加临时 class，比依赖伪类更可控 - 注意：
:active在部分 Android 浏览器中持续时间极短（约 100ms），需配合transition-delay微调响应节奏
真正麻烦的不是写那几行 CSS，而是缩放后要不要重绘背景渐变、要不要同步调整图标尺寸、以及手指划过时你希望它是立刻响应还是带 50ms 延迟来过滤误触——这些细节没写进规范，但上线后第一个被 QA 打回来。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
