按钮视觉层级由语义、状态反馈、空间关系和可访问性共同决定；type属性影响默认权重，:focus-visible与:hover须分离定义，disabled需同步属性与样式，移动端热区须≥44px。
按钮视觉层级不是靠“加阴影”或“调高饱和度”就能解决的，而是由语义、状态反馈、空间关系和可访问性共同决定的。盲目堆砌CSS效果反而会削弱主次判断，甚至破坏键盘导航流。
为什么
浏览器对不同type值的按钮有隐含的样式倾向：比如type="submit"在部分 UA 样式中默认带轻微加粗或更重的 box-shadow；而type="button"则更“中性”。这不是 bug，而是语义驱动的视觉暗示。
- 主操作（如“确认付款”）必须用
type="submit"，哪怕不在<form></form>里——它天然获得更高视觉优先级，且能被form.submit()等原生逻辑捕获 - 次要操作（如“取消”“返回”）用
type="button"，配合线框或浅灰背景，避免与主按钮竞争焦点 - 绝对不要省略
type：未声明时某些浏览器默认为submit，导致视觉上是次级按钮，行为上却触发提交，造成认知断裂
:focus-visible 与 :hover 分离定义的必要性
把:hover、:focus、:active写成一个选择器（如button:hover, button:focus, button:active）会让键盘用户失去聚焦反馈，触摸设备无法响应点击态，Safari 移动端甚至跳过:active。
-
:hover只用于鼠标悬停：微调背景色（如background-color: #0056b3），别改尺寸或 padding -
:focus-visible专供键盘用户：必须有高对比轮廓，例如outline: 2px solid #007bff，且禁用outline-offset防止被父容器裁剪 -
:active模拟物理按压：用transform: translateY(1px)比单纯变色更可信；Safari 上补touch-action: manipulation
禁用状态（disabled）的视觉表达不能只靠 opacity
button:disabled { opacity: 0.4; }是最常见的错误写法——它既不阻止键盘聚焦（Tab 仍能停在上面），也不告诉屏幕阅读器“这个不可用”，色觉障碍用户可能完全看不出区别。
- 必须同步设置
disabled属性和aria-disabled="true" - 禁用样式应包含三重保障：低透明度 + 灰阶背景色（如
#cccccc） +cursor: not-allowed - 避免仅用颜色区分可用/禁用：至少叠加文字变化（如“提交中…”）或图标状态（旋转 SVG 变为暂停图标）
移动端热区不足是视觉层级失效的隐形原因
视觉上醒目的按钮，如果实际可触区域小于 44px × 44px，在 iOS/Android 上就会被系统判定为“难点击”，用户反复点不中，自然觉得这个按钮“不重要”或“失灵”。
- 不要只靠
font-size和padding撑开热区：直接设min-height: 44px，并确保padding上下之和 ≥ 16px（假设字号 14px） - 图标按钮（如
<button><svg></svg></button>）必须设width: 44px; height: 44px，圆角border-radius: 50%，否则 SVG 缩放会导致点击偏移 - 文本类链接按钮（如“查看更多”）保留直角
border-radius: 0，靠padding和下划线建立识别，强行套圆角会模糊其功能定位
真正影响视觉层级的，从来不是某个 CSS 属性调得有多炫，而是 disabled 是否真禁用、focus 是否真可见、热区是否真够大——这些细节一旦出错，再漂亮的渐变和阴影也救不回用户的信任感。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
