html按钮默认无视觉吸引力，需主动添加微交互；hover应多属性联动过渡，避免重排；移动端需兼顾:active与touch-action；加载态宜用伪元素和aria-busy保障可访问性。
HTML 按钮本身没有视觉吸引力，是因为它默认只是一段带 type="button" 的普通标签——浏览器不渲染“交互感”，只提供基础可点击能力。吸引力来自你主动加的微交互，不是按钮天生自带的。
hover 时颜色/阴影变化太弱？试试用 transition + 多属性联动
很多人只写 transition: background-color 0.3s，结果鼠标移上去像卡顿半秒才变色。真正顺滑的关键是提前声明所有会变的属性，并统一用 ease-out 或 cubic-bezier(0.25, 0.46, 0.45, 0.94)。
- 必须同时过渡
background-color、box-shadow、transform（哪怕只是scale(1.02)），否则视觉会割裂 - 避免在
:hover中修改height或padding，会触发重排，导致抖动 - 移动端没
hover，所以别单独依赖它做核心反馈——得搭配:active
点击没反馈？:active 状态常被忽略或写错
浏览器默认只给 button 元素应用 :active，但如果你用了 <div onclick="..."> 或禁用了 <code>user-select，这个状态就失效了。更常见的是写了 :active 却没加 transition，导致按下瞬间“跳变”。
- 确保元素有
cursor: pointer和touch-action: manipulation（防 iOS 300ms 延迟） -
:active中建议只做transform: scale(0.98)或opacity: 0.85，别改布局尺寸 - 如果用了 CSS-in-JS 或 Shadow DOM，检查样式作用域是否覆盖到了
:active
加载中状态硬塞文字？用伪元素 + aria-busy 更可靠
直接 innerText 替换 “提交” → “提交中…” 容易撑开按钮、破坏居中，还可能被屏幕阅读器误读为内容变更。真正的加载态应该视觉隔离、语义明确。
- 用
::before伪元素叠加 loading spinner（SVG 或纯 CSS 动画），主文字不动 - 同步设置
aria-busy="true"和disabled属性，让辅助技术知道不可操作 - 避免用
display: none隐藏原文字——应改用visibility: hidden或clip-path，保留占位
微交互不是加动画越多越好，而是让每次点击都给出「确定被接收」的信号。最常被忽略的其实是状态边界：比如从 :hover 进入 :active 时有没有过渡衔接，加载结束后有没有恢复焦点和键盘可访问性。这些细节不写进代码里，用户就会觉得“按钮有点迟钝”。
