按钮真正“吸引人”取决于是否在正确时间、以正确方式响应用户意图；必须显式声明type属性，禁用时同步设置disabled和aria-disabled，:hover/:focus/:active需分离定义，移动端热区≥44px，禁用状态需多重保障。
真正让按钮“吸引人”的不是圆角或阴影本身，而是它是否在正确时间、以正确方式回应了用户意图——视觉吸引力只是可访问性、语义和反馈链自然外溢的结果。
button 元素必须显式声明 type 属性
不写 type 的 在部分浏览器中会默认为 submit，表单内意外提交是高频线上事故。更隐蔽的问题是：当 JS 动态控制按钮状态时，若只靠 class 切换样式（比如加 .is-disabled），click 事件仍会触发，且键盘用户仍能 Tab 进去并回车。
- 主操作按钮（如“确认付款”）用
type="submit"，哪怕不在内，也能被原生表单事件捕获 - 纯交互按钮（如“展开详情”）必须写
type="button"，杜绝隐式行为 - 禁用逻辑由 JS 控制时，不要只改样式，务必同步设置
disabled属性和aria-disabled="true"
:hover/:focus/:active 必须分离定义，不能合并选择器
把三者写成 button:hover, button:focus, button:active { ... } 看似省事，实则破坏可访问性：键盘用户聚焦时看不到悬停效果，触摸设备点击后无按下反馈，Safari 移动端甚至可能跳过 :active。
-
:hover只作用于鼠标悬停，推荐微调背景色或加轻微阴影，别动尺寸 -
:focus必须有高对比轮廓线，例如outline: 2px solid #007bff，且禁用outline-offset防止被父容器裁剪 -
:active推荐用transform: translateY(1px)模拟按压，比单纯变色更符合物理直觉；Safari 上额外加touch-action: manipulation提升响应
移动端最小点击区域必须 ≥44px × 44px
CSS 中设 height: 36px 看似够用，但 iOS 和 Android 规范要求可触控元素最小物理尺寸为 44pt（约 44px @1x）。若按钮内容文字小、内边距窄，实际热区会缩水，导致误触或点不中。
- 主操作按钮建议设
min-height: 44px，配合上下padding保证热区饱满 - 图标按钮（如
）优先用width: 44px; height: 44px，圆角设为50%，避免用font-size缩放 SVG 导致点击偏移 - 文本链接类按钮（如“查看更多”）保留直角
border-radius: 0，靠padding和下划线区分，别强行套圆角
禁用状态不能只靠 opacity 或颜色变灰
button:disabled { opacity: 0.4; } 是最常见也最危险的写法：屏幕阅读器仍可能播报该按钮，键盘用户仍能 Tab 进入，且视觉上灰度不足时，色觉障碍用户根本分不清是否可用。
- 必须同时设置
pointer-events: none（彻底禁鼠标） +cursor: not-allowed（视觉提示） +aria-disabled="true"（辅助技术识别） - 禁用时背景色建议用
#e9ecef这类明确灰阶值，而非直接继承启用态颜色再降透明度 - 如果按钮禁用依赖 JS 计算（如表单字段未填满），每次校验后要手动同步
disabled属性，不能只切 class
最容易被忽略的其实是「按钮何时该不可用」——不是所有表单都适合立刻禁用提交按钮，有时留一个可点击但带明确错误提示的状态，反而降低用户焦虑。视觉只是最后一层表达，逻辑闭环才决定按钮是否真正“吸引人”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
