在网页交互里，按钮是最常被点击的元素。不少人在写样式时会发现，鼠标按下去的那一瞬间，按钮好像突然缩了一圈，松开又弹回来，整个动作非常生硬。这种现象并不是浏览器bug，而是样式写法触发了布局重算。理解背后的渲染机制，再用transform和transition去替代直接改宽高，就能彻底消除跳变。
为什么按钮按下会出现尺寸跳变
当我们给按钮的:active伪类直接设置不同的width或者height，甚至修改padding与border-width时，浏览器必须重新计算该元素以及周围兄弟元素的几何位置，这一步在渲染流程里叫做重排（reflow）。重排一旦发生，界面就要同步刷新布局，用户视觉上就会看到按钮“瞬间变样”，也就是所谓的尺寸跳变。如果按钮处于文档流中间，跳变还可能带动周边文字或控件抖动，体验更差。
另一个容易被忽略的原因是盒模型切换。有些写法在常态用box-sizing: content-box，按下时改成border-box，或反过来，这会让同样数值的宽高实际占用的像素不同，也会产生跳变。此外，如果按钮内部有固定尺寸的子元素，父级尺寸变化还会引发子元素重排。因此解决思路应当是：在不改变布局占用空间的前提下，仅做视觉上的缩放，这正是transform的优势所在。
从渲染性能看，直接改宽高走的是布局加绘制加合成，而transform的scale只走合成线程，不触发重排与重绘。即便在低端设备，scale动画也基本能保持60帧。所以把“按下变小”这个需求从改几何属性转变为改变换矩阵，是根本解法，也能顺带提升流畅度。
用transition与scale写出平滑按压效果
核心做法是为按钮加上transition属性，监听transform的变化，然后在:active里把transform设为scale(0.96)这类略小于1的值。这样按下时按钮通过缩放显得被压下去，松开回到scale(1)，中间由transition补间，不再有硬切。下面是一段基础可用代码：
.button {
padding: 10px 24px;
font-size: 16px;
border: none;
border-radius: 6px;
background: #3b82f6;
color: #fff;
cursor: pointer;
/* 关键：对transform做缓动 */
transition: transform 0.12s ease, background 0.12s ease;
will-change: transform;
}
.button:active {
/* 按下时缩小到96%，不改动宽高 */
transform: scale(0.96);
background: #2563eb;
}
上面的transition里只过渡了transform和background，没有碰width之类的布局属性，因此全程无重排。时间设成0.12秒是比较自然的按压节奏，太短像没反应，太长像卡顿。如果项目里按钮很多，可以把这段提取成通用类，避免重复书写。
需要注意，scale默认以元素中心为基点缩放。若希望从底部压下去，可加transform-origin: center bottom。另外当按钮有position: fixed或处在弹性容器中时，scale不会影响别人，但若有overflow: hidden的父级，缩小可能被裁切，这时要确认父级留有余量。以下示例展示带原点的写法：
.press-btn {
transform-origin: center bottom;
transition: transform 0.1s linear;
}
.press-btn:active {
transform: scale(0.94);
}
进阶：结合位移与阴影增强自然感
真实物理按钮被按压时，不光是变小，还会产生轻微下沉和光影变化。我们可以用translateY配合scale，并在:active时减弱box-shadow，模拟被压入平面的感觉。这样比单纯缩放更有“按下去”的实感，且同样不触发重排。
.card-btn {
padding: 12px 20px;
border: none;
border-radius: 8px;
background: #10b981;
color: #fff;
box-shadow: 0 4px 0 #047857;
transition: transform 0.1s ease, box-shadow 0.1s ease;
}
.card-btn:active {
/* 下沉并缩小，同时阴影变薄 */
transform: translateY(2px) scale(0.97);
box-shadow: 0 1px 0 #047857;
}
这段里translateY(2px)让按钮视觉下移，和底部阴影变薄结合起来，就像真被手指压下去。因为translateY也是transform，不会重排。若页面有键盘可达性要求，别忘了:focus-visible也加上类似反馈，但别用scale导致读屏焦点框变形，可只做阴影或背景变化。
最后提醒，移动端点击会有300毫秒延迟历史问题，但现代浏览器加viewport声明后已无此虑。若按钮在滚动容器里，频繁scale可能引起轻微模糊，可给父级加transform: translateZ(0)提升为独立层。总之，用transition加scale替代宽高改动，是消除css按钮按下尺寸跳变最稳妥且高性能的方案。
csstransitionscale修改时间：2026-08-17 11:36:33