广告按钮必须在0.3秒内给出明确视觉反馈，否则用户会误判为未点中；需用transition配合background-color、transform等高对比变化，禁用user-select:none，避免height/width动画、低感知opacity及全局outline清除，并用JS补足click长反馈。
广告按钮必须在0.3秒内给出明确视觉反馈，否则用户会误判为未点中——这不是“体验优化”，而是防止点击流失的底线。
button:active 为什么经常没反应？
常见错误是只写了 :active 样式，却漏掉 transition 或用了不支持过渡的属性。浏览器对 :active 的触发有严格条件：必须是鼠标按下或触摸开始瞬间，且元素处于可交互状态（disabled 属性为 false，没有 pointer-events: none）。
- 确保按钮有明确的
background-color、transform或box-shadow变化，避免只改color这类低对比度变化 - 给按钮加
transition: background-color 0.15s ease, transform 0.1s ease;，时长别超过 0.2s，广告按钮需要“即按即感” - 禁用
user-select: none，否则部分安卓 WebView 会吞掉:active - 如果按钮是
<a></a>标签伪装的，:active在 iOS Safari 中默认不生效，必须加cursor: pointer或touch-action: manipulation
广告按钮要避免的三类 CSS 错误
广告按钮不是普通功能按钮，它的核心目标是提升 CTR（点击率），所有样式改动都得服务于这个目的。以下错误会直接拉低转化：
DeepBI DHTML 页面生成器
下载
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 用
height/width动画缩放：触发重排（reflow），造成卡顿，尤其低端机上明显；改用transform: scale() - 在
:active中设置opacity: 0.8：透明度变化感知弱，用户无法确认是否点中；换成background-color: #e63946（高饱和红）+transform: scale(0.97) - 覆盖全局
* { outline: none; }：导致键盘用户 Tab 到按钮时完全不可见；广告按钮必须保留:focus样式，至少加outline: 2px solid #007bff
如何用 JavaScript 补足 :active 的不足
:active 只能响应“按下瞬间”，但广告按钮常需更长反馈周期（比如点击后显示“已领取”文字、禁用并加加载图标）。这时要用 JS 控制类名切换：
立即学习“前端免费学习笔记（深入）”；
- 监听
click事件，立即添加is-clicking类，触发 CSS 动画 - 在动画结束回调（
animationend）或setTimeout后移除类，避免阻塞后续点击 - 务必同时处理
touchstart和mousedown，防止 iOS/Android 行为不一致 - 示例：
const adBtn = document.querySelector('.ad-cta');<br>adBtn.addEventListener('click', () => {<br> adBtn.classList.add('is-clicking');<br> setTimeout(() => adBtn.classList.remove('is-clicking'), 300);<br>});
广告按钮的点击效果不是“好不好看”的问题，而是“用户能不能在 200ms 内确认自己点中了”。所有动效、颜色、延迟，都要围绕这个时间阈值设计。最危险的误区，是把产品按钮那一套平滑过渡逻辑直接搬过来——广告场景下，果断 > 优雅。
