按钮点击反馈需立刻可见，须用JS控制is-loading状态、禁用按钮并插入SVG加载动画，成功后3秒恢复文案；颜色动效服从品牌，无障碍与移动端热区须达标，状态应由组件外统一管理。
按钮点击反馈必须立刻可见
用户点下按钮的瞬间没反应，是放弃购物车的第一步。纯 CSS :hover 或 :active 不够——它们不解决“已点击但请求未返回”的等待态。必须用 JS 控制状态切换，比如添加 is-loading 类，配合禁用按钮和加载图标。
- 不要只靠
button:active { opacity: 0.7; }，这在移动端几乎无效（触摸事件不触发 :active） - 点击后立即
button.disabled = true，并插入 SVG 加载动画（比 GIF 更轻、可缩放） - 成功后改文案为“已加入”，3 秒后自动恢复原文字，避免用户反复猛点
颜色与动效要服从品牌，别抢商品主视觉
吸睛 ≠ 荧光粉 + 旋转 + 弹跳。购物车按钮的核心任务是“被找到”和“被信任”，不是当页面焦点中心。如果商品图本身饱和度高、有动态轮播，按钮用高对比纯色（如深灰#333配亮黄#FFD700）比渐变紫更稳。
- 避免使用
box-shadow: 0 0 20px #ff00aa;这类无上下文的浮夸投影——它在深色背景或 Retina 屏上会糊成一片 - 微动效推荐
transform: scale(0.98);配transition: transform 0.1s ease，比width或height动画更流畅且不触发重排 - 悬停放大别超过
scale(1.05)，否则可能撑破父容器或遮挡价格标签
无障碍与移动端点击热区不能妥协
很多“吸睛设计”一测就翻车：色盲用户分不清按钮和边框、手指点不准 32px 高的按钮、屏幕阅读器读不出“加入购物车”实际执行的是 addCartItem(id)。
- 按钮内必须用真实文字，禁用纯 icon +
aria-label模糊表述；写aria-label="加入商品「无线耳机 Pro」到购物车"比"Add to cart"更明确 - 移动端最小点击区域设为
48px × 48px，可用padding扩展热区，但别用font-size硬撑高度（小屏字体会溢出） - 颜色对比度至少满足 WCAG AA（文本与背景比 ≥ 4.5:1），工具可跑
axe-core或浏览器 Lighthouse
别在按钮里塞逻辑，状态该由组件外管理
常见错误：把 fetch('/api/cart', {...}) 直接写在按钮 onclick 里，导致加购失败时无法统一处理错误提示、库存变更、跨 Tab 同步等场景。
- 按钮只负责调用一个明确接口函数，如
handleAddToCart(productId, variantId)，所有副作用（loading、toast、analytics）收口到该函数内部 - 禁用态（
disabled）必须和真实业务状态同步：库存为 0 时按钮应为disabled并显示“缺货”，而不是仍可点再报错 - 如果页面用 React/Vue，按钮应是无状态的 UI 元素，
props只接收isLoading、isInStock、text三类字段
实际中最容易被忽略的，是按钮在「加入后又快速切到其他商品」时的状态残留——比如前一个请求还在 pending，新商品的按钮却显示“已加入”。这种竞态问题不靠按钮自身能解决，得靠请求 cancel 或防抖控制，但第一步得先让按钮的 loading 和 success 状态真正受控。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
