button默认样式不能直接改，因为浏览器UA样式会与自定义CSS叠加而非覆盖；必须先设appearance: none清除默认样式，再重置border、padding、font等属性，否则border-radius和background-color可能失效。
button 默认样式为什么不能直接改？
因为浏览器给 <button> 写了一套 UA 样式（比如 Chrome 加阴影、Safari 强制圆角、旧版 IE 塞内边距），你写的 CSS 会和它叠加，而不是覆盖。不先清掉，默认 border-radius 可能被遮住，background-color 在某些安卓 WebView 里压根不生效。
必须做的第一步：appearance: none
这是所有美化前提，漏掉就等于在别人画好的画上涂改：
button,
input[type="button"],
input[type="submit"],
input[type="reset"] {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
border: none;
background: none;
padding: 0;
margin: 0;
font: inherit;
color: inherit;
cursor: pointer;
}
-
appearance: none是关键，Firefox/Safari 不写它，border-radius和background基本失效 -
font: inherit防止字体异常（尤其 Safari 对input[type="submit"]继承差） -
padding: 0比height更可靠——用padding控制按钮大小，文字才不会被截或错位
:hover 和 :active 状态容易漏的细节
只写 background-color 不够，用户需要明确反馈：
-
:hover必须配transition，否则颜色跳变生硬：transition: background-color 0.2s, transform 0.1s -
:active建议加transform: translateY(1px)模拟按下感，别只调颜色 -
:disabled要单独写：opacity: 0.6; cursor: not-allowed，否则禁用后还能 hover 出颜色 - 移动端没 hover，
:active和touch-action: manipulation得一起上，否则点击反馈延迟
移动端按钮最容易踩的坑
按钮在手机上出问题，往往不是代码写错，而是默认行为没控住：
立即学习“前端免费学习笔记（深入）”；
-
display: inline-block的默认vertical-align: middle会让按钮和旁边文字对不齐，显式设vertical-align: top或改用 flex - iOS Safari 对过大的
border-radius（比如999px）会裁掉图标或文字，建议用12px或0.5rem - 别依赖
:hover做主交互提示，移动端得靠:active+ 视觉压感，且按钮最小点击区域建议 ≥ 44×44px - 系统默认按钮有
-webkit-tap-highlight-color，不关掉点下去会有灰斑，加-webkit-tap-highlight-color: transparent
appearance: none 和 :disabled 的完整处理——前者让样式真正可控，后者决定用户是否会在提交失败后反复狂点。 
