最可靠方式是显式重置所有默认样式：border: none; background: transparent; padding: 0; margin: 0; font: inherit; color: inherit; text-align: inherit; line-height: inherit; cursor: pointer; outline: none。
直接移除 button 默认样式最可靠
浏览器给 <button></button> 加了一堆默认样式：圆角、阴影、边框、内边距、背景色、文字加粗……想彻底重置，不能只靠改几个属性，得用 CSS 一次性清掉。最稳妥的方式是显式覆盖所有可能影响外观的属性。
常见错误是只写 border: none 或 background: none，结果发现按钮还是有微妙的 padding、font-weight 或 focus outline，点上去视觉跳变。
推荐这样写：
.add-to-cart {
border: none;
background: transparent;
padding: 0;
margin: 0;
font: inherit;
color: inherit;
text-align: inherit;
line-height: inherit;
cursor: pointer;
outline: none;
}
注意几点：
-
font: inherit比单独设font-size更安全，能继承父级字体族、大小、粗细、行高等全部设置 -
color: inherit避免按钮文字被浏览器强制设为黑色或蓝色 -
outline: none必须加，否则键盘聚焦时会冒出难看的虚线框（可后续用:focus-visible做可访问性增强） - 如果按钮里有图标或图片，记得检查
vertical-align，否则可能和文字对不齐
用 appearance: none 要小心兼容性
appearance: none 看起来很省事，但它只是告诉浏览器“别渲染原生控件样式”，并不等于“清空所有样式”。不同浏览器对它的实现差异大，比如 Safari 可能仍保留点击反馈，Firefox 在某些版本里对 button 的 appearance 支持不完整。
更麻烦的是，它无法解决 button 的默认 padding 和 line-height 行为——这些是 UA 样式表硬编码的，appearance 不管。
所以除非你明确只在现代 Chromium 内核环境运行，否则别依赖它做重置。真要用，也得配合上面那套 reset 属性一起上。
重置后记得手动定义交互状态
清掉默认样式后，:hover、:active、:disabled 全都没了。用户没反馈，就会觉得按钮“点不动”。
至少补这三类：
-
:hover—— 加个背景色或下划线，让人一眼看出可点 -
:active—— 缩小一点transform: scale(0.98)或变暗背景，模拟按下感 -
:disabled—— 设opacity: 0.5+cursor: not-allowed，避免误点
别忘了移动端的 :active 在 iOS 上需要 cursor: pointer 触发（哪怕只是空声明），否则压感失效。
如果按钮是用 标签模拟的，要额外处理
有人为了“更好控制样式”把加入购物车做成 <a href="javascript:void(0)"></a>，这会引入新问题：a 标签默认有 text-decoration: underline，且没有 button 的语义和键盘可访问性（如空格/回车触发）。
如果非要用 <a></a>，至少加：
.add-to-cart-link {
text-decoration: none;
-webkit-tap-highlight-color: transparent;
user-select: none;
/* 并手动绑定 keydown 回车/空格事件 */
}
但强烈建议坚持用 <button type="button"></button>，语义正确、无需额外事件适配、屏幕阅读器自动识别为可操作控件。
真正麻烦的不是重置样式，而是重置之后忘记补全交互反馈和可访问性细节。一个按钮看起来“干净”了，不代表它好用了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
