按钮默认样式难改因浏览器user agent stylesheet强制设定内边距、字体、边框等，且各浏览器差异大；需用border:none;background:none;padding:0;margin:0;font:inherit;color:inherit;text-align:inherit;-webkit-appearance:none;-moz-appearance:none;appearance:none重置。
按钮默认样式为什么难改
浏览器给 <button> 设了一套「隐形规矩」：内边距、字体、边框、背景色全由 user agent stylesheet 控制，不同浏览器还略有差异。直接写 background: #007bff 可能无效，因为默认的 border 和 padding 会干扰视觉一致性。
- Chrome 默认给
button加了border: 2px outset，且outline在聚焦时强制显示 - Firefox 对
font-size和line-height的继承更保守，容易导致文字上下偏移 - 移动端 Safari 会给
button加一层半透明灰色 overlay，不重置-webkit-appearance: none就没法彻底接管样式
必须写的重置 CSS 规则
不是加个颜色就完事——得先「清空」浏览器自带干预。下面这几行是真正起效的底线配置：
button {
border: none;
background: none;
padding: 0;
margin: 0;
font: inherit;
color: inherit;
text-align: inherit;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
特别注意：-webkit-appearance: none 缺失会导致 iOS 上按钮圆角失效、点击反馈残留；font: inherit 能避免字体大小在嵌套容器中意外缩放；color: inherit 让文字颜色随父级文本自然响应。
分享按钮常见视觉模式与对应代码
分享按钮本质是功能型 UI，不能只追求好看。需按使用场景选方案：
立即学习“前端免费学习笔记（深入）”；
- 纯图标按钮（如微信、微博 icon）：用
width/height固定尺寸，background-image或 inline SVG，禁用text-indent（它会破坏可访问性） - 文字+图标组合：用
display: flex+gap，避免浮动或负 margin；图标用width: 1em保证等比缩放 - 悬停动效：优先用
transform: scale(1.05)而非width/height变化，避免布局抖动 - 禁用态：别只改
opacity: 0.5，要同步设pointer-events: none和cursor: not-allowed
无障碍和点击区域的隐藏陷阱
美化后最容易出问题的是「点不中」和「读不出」：
- 移动端点击热区至少 44×44px，但很多设计师只按视觉尺寸写
width: 32px—— 正确做法是用padding扩展可点击范围，而非撑大图标本身 - 纯图标按钮必须带
aria-label，例如<button aria-label="分享到微信"><svg>...</svg></button> - 用
:focus-visible替代:focus控制键盘聚焦样式，避免鼠标点击时出现多余轮廓线 - 如果按钮内容动态插入（比如 JS 渲染分享平台列表），确保
role="button"和tabindex="0"同步添加
按钮再小，只要用户要点击，就得考虑手指误差、屏幕反光、色觉障碍和键盘导航——这些不是附加项，是默认按钮被美化前就该存在的基础。
