按钮添加 background-color: transparent; border-color: transparent 后并非真正失效，而是因缺少视觉反馈（如鼠标悬停光标、背景变化等）导致用户误判为不可点击；只需补充 cursor: pointer 及必要交互样式即可恢复直观可用性。
在 Web 开发中，为覆盖浏览器默认的 User Agent 样式（如 Chrome 对
<button class="register-continue-with-google register-continue-with"
style="background-color: transparent; border-color: transparent;">
Sign Up with Google
</button>但此举会移除所有默认视觉线索——包括非聚焦状态下的背景、边框，以及鼠标悬停时的指针样式（cursor）。结果是：按钮仍能正常响应 click 事件（可通过 console.log 或 JS 逻辑验证），但用户无法感知其可交互性，从而产生“按钮变灰/失活/不可点击”的错觉。
✅ 正确解法：保留功能性，增强可感知性
最简且关键的修复是显式声明 cursor: pointer，向用户明确传达“此处可点击”：
<button class="register-continue-with-google register-continue-with"
style="background-color: transparent; border-color: transparent; cursor: pointer;">
Sign Up with Google
</button>⚠️ 注意事项：
-
仅靠 cursor: pointer 不够健壮：建议同时补充伪类样式以提供完整反馈（即使使用内联 CSS 有限制，也应优先在外部样式表中定义）：
.register-continue-with-google { background-color: transparent; border: none; cursor: pointer; outline: none; /* 移除焦点虚线框（若设计允许），避免干扰 */ padding: 12px 24px; font-size: 16px; } .register-continue-with-google:hover { background-color: rgba(0, 0, 0, 0.05); /* 微弱悬停反馈 */ } .register-continue-with-google:active { transform: scale(0.98); /* 轻微按压效果 */ } - 避免纯内联样式陷阱：内联 CSS 无法定义 :hover / :active 等伪类，长期维护应将样式移至
- 可访问性提醒：确保按钮有足够对比度的文字颜色（如 color: #333），并保留 focus 样式供键盘用户导航（除非已通过其他方式提供清晰焦点指示）。
? 总结：
“按钮不可点击”在此场景下本质是UX（用户体验）缺陷而非功能故障。根本解决思路是：
1️⃣ 用 cursor: pointer 提供即时视觉信号；
2️⃣ 通过 :hover/:active 补充状态反馈；
3️⃣ 避免过度依赖内联样式，回归语义化 CSS 架构。
如此，既尊重用户代理样式重置需求，又保障交互直觉与可访问性。
