必须先确保 button 的 type="button"、data-product-id 存在且禁用逻辑用原生 disabled 属性，再重置 appearance、border 等默认样式，配合 flex 居中、触控区保底及状态伪类，否则样式无效。
直接改 CSS 就行，但必须先处理好 type、data-product-id 和禁用逻辑，否则样式再好看也白搭。
button 默认样式太顽固，重置三件套不能少
浏览器对 button 有强默认样式：Safari 留白边、Firefox 加阴影、所有浏览器继承父级字体。光靠 padding 或 background 很难生效。
- 必须加
appearance: none;，同时补上-webkit-appearance: none;和-moz-appearance: none; - 显式写
border: none;，别指望background: none;能清掉边框 - 文字居中别只靠
text-align: center，推荐display: flex; align-items: center; justify-content: center;
购物车按钮的 data 属性和 type 是样式前提
很多样式改不成功，是因为按钮根本没被 JS 正确识别或触发了表单提交，导致页面刷新、样式来不及应用就跳走了。
Wechat Article Html
下载
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
- 务必写
type="button"，哪怕不在<form></form>里——浏览器默认是submit，不是“无行为” - 必须带
data-product-id，例如<button type="button" data-product-id="1057">加入购物车</button>，否则 JS 拿不到商品 ID，后续状态控制（如禁用、加载态）全失效 - 如果用了
class="btn-add"却没配data-product-id，结构一动，JS 就找不到对应商品，样式再漂亮也没用
悬停、点击、禁用状态要单独写，不能只靠 class 切换
仅靠 JS 切换 loading 类名，容易漏掉真实 DOM 状态，导致用户连点、重复请求、屏幕阅读器误判。
-
:hover必须设cursor: pointer，不然鼠标悬停没反馈，尤其在非button元素上模拟按钮时极易遗漏 -
:active建议加轻微背景变深或transform: scale(0.98)，增强按压感 - 禁用状态必须用原生
disabled属性：button.disabled = true，而不是只加.disabled类；恢复时优先设button.disabled = false，比删 class 更可靠 - 同步设置
aria-busy="true"，让辅助技术知道当前不可交互
移动端触控区小、圆角大、间距乱，这些细节最易翻车
iOS Safari 对超大 border-radius（比如 999px）会降级渲染，且 inline-block 按钮间的换行符会产生空白间隙，实际点击区缩水。
- 触控区至少
44px × 44px，用min-width和min-height保底，别只靠padding - 圆角建议用
6px、8px或0.5rem，避免 iOS 下失效 - 多个按钮横向排列时，用
display: flex替代inline-block，彻底避开换行空白问题 - 如果用了
transition，记得加will-change: transform防低端安卓卡顿
真正卡住人的从来不是怎么让按钮变圆或变蓝，而是 data-product-id 漏了、type 没写、disabled 用 class 模拟、触控区在 iPhone 上点不中——这些地方一错，样式调得再精致也进不了购物车。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
