CSS 控制按钮样式需彻底重置 UA 样式，用 appearance: none、border: none、background: none 三件套；button 语义更优且支持嵌套；禁用状态须兼顾可访问性与视觉反馈；移动端 hover 无效，应降级为 active 反馈。
直接用 CSS 控制，HTML 本身不提供按钮样式能力——button 和 input[type="submit"] 的外观完全由 CSS 决定，浏览器默认样式（UA 样式）只是起点，且各浏览器差异明显。
为什么改了 background-color 没生效？
常见原因是没彻底重置浏览器 UA 样式。Chrome、Firefox、Safari 对 button 的默认 padding、border、font 处理不一致，光设 background-color 往往被默认内边距或边框“盖住”视觉效果。
- 必须加三件套：
appearance: none（补-webkit-appearance: none和-moz-appearance: none），border: none，background: none -
padding比height/width更可靠地控制尺寸，避免文字被截或上下错位 - 移动端 iOS Safari 对过大的
border-radius（如999px）会裁剪内容，建议用12px或0.5rem
button 和 input[type="submit"] 样式写法有区别吗？
有。虽然都能用 CSS 美化，但语义和可定制性不同：前者支持嵌套内容（比如图标+文字）、更易统一处理伪状态；后者在旧 IE 中 disabled 样式兼容略好，但无法嵌套 HTML。
- 推荐优先用
<button type="submit">提交</button>，显式声明type避免默认行为误判 - 若选
input[type="submit"]，需额外加appearance: none才能彻底剥离 UA 样式（button默认就更“干净”） - 两者都需单独写
:hover、:active、:focus、:disabled，不能只靠一个选择器覆盖
禁用按钮时，只加 disabled 属性就够了吗？
不够。仅加 disabled 属性会让按钮失去焦点、键盘不可访问，且屏幕阅读器跳过它——这违反可访问性要求。视觉上也容易只剩灰度，缺乏明确反馈。
立即学习“前端免费学习笔记（深入）”；
- 必须配合 CSS：设
opacity: 0.6+cursor: not-allowed+ 移除所有:hover动画 -
:focus样式不能删，否则键盘用户 Tab 到此处无提示；建议保留outline: 2px solid #007bff - 别用
pointer-events: none或opacity模拟禁用——它仍可被 JS 触发 click，且不传达语义 - JS 控制时，用
btn.disabled = true，而非setAttribute('disabled', '')
hover 效果在手机上为什么不触发？
因为触摸设备没有“悬停”概念，:hover 在 iOS Safari 和部分安卓 WebView 中可能不生效，或只在短暂点击后闪现。
- 移动端应降级处理：
@media (hover: none) and (pointer: coarse)下关闭:hover，改用:active做即时反馈 -
:active建议用transform: scale(0.98)或背景色变化，避免纯颜色切换（色盲用户难感知） - 确保
cursor: pointer已设置——PC 端没它，鼠标悬停时不显示手型，体验断裂
真正可用的按钮不是“看起来像”，而是语义正确、状态完整、多端可交互、可访问可聚焦——样式只是表层，底层逻辑漏一点，用户一操作就露馅。
