透明按钮需设 background: transparent 而非 none，且必须同时设置 border、color 和 padding；opacity 影响整体元素，rgba 仅作用于背景色；移动端热区靠 padding 保障；图片背景需确保透明通道和 background-color: transparent；:focus-visible 样式不可遗漏。
透明按钮必须显式设 background: transparent
很多人写 button { background: none; }，结果在 Chrome 或 Firefox 里按钮还是有灰白底——none 不等于完全清空，浏览器可能 fallback 到默认背景色。真正起效的是 background: transparent，它强制把背景层置为空，但保留文字、边框、阴影等所有其他渲染层。
同时必须配齐这三项，缺一不可：
-
border: 1px solid currentColor或具体颜色值（比如#666），否则边框被重置为不可见 -
color: #333（或与页面背景有足够对比的色值），避免文字“隐形” -
padding: 12px 24px，空按钮靠 padding 维持可点击热区，不是靠内容撑开
opacity: 0.5 和 rgba(0,0,0,0.5) 的根本区别
opacity 是作用于整个元素及其所有子节点的渲染树层级，设了 opacity: 0.5，按钮文字、图标、边框全变淡，可读性暴跌；而 rgba(0,0,0,0.5) 只改背景色的 alpha 值，文字照常清晰。
典型翻车场景：
- 导航栏用
opacity做半透，下拉菜单文字糊成一片 - 卡片内按钮 hover 时只加
opacity，结果图标和文字一起发虚 - 想让按钮背景带 20% 灰度，却误写成
opacity: 0.2，整个按钮几乎看不见
记住：要背景透、内容不透，只动 background-color，别碰 opacity。
移动端点击区域太小？padding 是唯一解
幽灵按钮常因只依赖文字内容撑尺寸，在手机上点击热区远小于 44×44px 最小可触标准。不能靠 min-width 或 width 硬撑——会破坏响应式，也不能指望 line-height 代偿，它不扩展点击区域。
正确做法是用 padding 主动定义热区：
- 基础款：
padding: 12px 24px（垂直留足空间，水平避免拥挤） - 含图标按钮：额外 +8–12px 水平 padding，保证图标与文字间距
- 深色背景上浅色文字按钮：适当加大 padding，提升手指容错率
如果用了 backdrop-filter: blur(4px)，padding 还得再加 2–4px，模糊边缘会让热区感知变弱。
图片当背景时为什么总不透明？路径和格式都得对
给 button 设 background: url("btn.png") 却没效果，90% 是这两个原因：
- PNG 文件导出时没勾选“保留透明通道”，实际是白底图，不是真透明
- CSS 漏了
background-color: transparent，Safari 会 fallback 到默认灰白底覆盖图片
安全写法：
button {
background: url("./btn-icon.png") no-repeat center / contain;
background-color: transparent;
border: none;
}
在 React/Vue 中动态切换图片，必须提前 import 路径，不能拼字符串——构建工具不会解析 url("/img/btn-hover.png") 里的路径，上线必 404。
最易被忽略的一点：透明按钮的 :focus-visible 样式必须单独处理。很多人只写了 :hover，键盘用户 Tab 进来时焦点轮廓消失，可访问性直接掉档。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
