按钮点击区域应优先调 padding 而非 width，确保移动端最小 44px×44px 热区；border 需统一设为 1px solid transparent 占位防抖动；禁用态需同步调整 border-color 和 background-color；伪元素装饰须设 pointer-events: none；所有状态保持 padding 和 border-width 一致以避免布局跳动。
按钮点击区域太小？先调 padding，别急着改 width
用户点不中、移动端误触，八成是按钮的可点击区域没撑开。CSS 中真正决定点击热区的是 padding + 内容尺寸，不是 width 或 height。强行设固定宽高反而会让文字被裁或换行错乱。
-
padding是控制按钮“呼吸感”的核心：上下留够12px以上才符合移动端最小点击尺寸（44px × 44px）要求 - 文字内容动态时（比如多语言），用
padding比用min-width更可靠 - 避免同时设
padding和width: 200px—— 盒模型下总宽 =width + padding × 2 + border × 2，容易溢出容器
border 不只是描边，它影响视觉重量和对齐
很多人以为 border 就是加个框，其实它直接参与按钮的基线对齐、阴影层次、甚至禁用态灰度表现。设成 0 并不等于“没边框”，而是可能触发浏览器默认 outline 或 focus ring 的异常渲染。
- 统一用
border: 1px solid transparent占位，后续 hover 时再变色，避免布局抖动 - 圆角按钮慎用
border-radius: 4px配粗边框（如3px）—— 视觉上圆角会被吃掉，实际要设到7px才显圆润 - 禁用态（
disabled）别只改opacity，记得同步调低border-color和background-color，否则边框会显得突兀
伪元素做装饰边框？小心层级和点击穿透
用 ::before 或 ::after 模拟双层边框、渐变描边时，很容易让按钮无法响应点击，或者 hover 效果错位。
- 确保伪元素的
pointer-events: none，否则会拦截鼠标事件 - 如果伪元素设置了
z-index，必须给按钮本身设position: relative，否则z-index不生效 - 动画边框（如 hover 时从左向右划入）优先用
background-image: linear-gradient()+background-size控制，比伪元素更轻量、无穿透风险
不同状态下的 padding 和 border 要保持一致
按钮在 :hover、:active、:focus-visible 下如果改变 padding 或 border-width，页面会轻微晃动，尤其在列表中多个按钮并排时特别明显。
- 所有状态都复用同一套
padding和border-width，只变color、background-color、box-shadow - 需要强调点击反馈？用
transform: scale(0.98)替代缩小padding，更稳定 - 键盘焦点样式（
:focus-visible）务必保留outline或等效box-shadow，但不要额外加border，否则与鼠标态不一致
细节都在 padding 和 border 的组合里：它们不是孤立属性，一动就牵扯对齐、可访问性、动画稳定性，还有设计师嘴里的“精致感”。改之前先问一句：这个值变的时候，会不会让按钮“跳”一下？
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
