玻璃拟态按钮（Glassmorphism 毛玻璃按钮 CSS）

效果演示（真实可交互）

玻璃拟态（Glassmorphism）的核心是「透过半透明表面看到背后的模糊色彩」。演示区在渐变背景上放置了流动光斑，四款按钮各自模糊并提亮背后内容，形成通透的毛玻璃质感。按钮可悬停、可按压，直接体验完整交互。

完整代码

核心样式（一段代码覆盖全部玻璃按钮）：

<button class="glass-btn">玻璃按钮</button>

.glass-btn {
  border: 1px solid rgba(255,255,255,.35);
  border-radius: 14px; padding: 12px 26px;
  font-size: 15px; color: #fff; font-weight: 600; cursor: pointer;
  /* 毛玻璃三件套：模糊 + 饱和度 + 半透明底 */
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  background: rgba(255,255,255,.12);
  /* 外投影浮起 + 内高光提亮边缘 */
  box-shadow: 0 8px 24px rgba(0,0,0,.18),
              inset 0 1px 0 rgba(255,255,255,.35);
  transition: all .25s ease;
}
.glass-btn:hover {
  background: rgba(255,255,255,.22);
  transform: translateY(-3px);
}

背景光斑用两个带 filter: blur(30px) 的彩色圆即可，位置随意摆放。变体（描边高亮、深色玻璃、图标玻璃）只需调整 border-color、background 透明度与内阴影，详见演示区 .gm-* 系列。

参数说明

兼容性与性能

• backdrop-filter 是玻璃拟态核心，Chrome 76+、Safari 9+（需 -webkit-）、Firefox 103+、Edge 全支持
• filter: blur() 会创建新的渲染层，建议背景光斑数量控制在 3-5 个内，避免内存占用过高
• 在低端安卓设备上，多个 backdrop-filter 叠加可能掉帧，此时可降低模糊半径或改用半透明实底
• 玻璃按钮文字务必保持高对比度（白色 90%+），否则在浅色背景上可读性差

常见问题

Q: 能商用吗？ 可以。本组件为粤喵自研，免费商用无需署名。

Q: 毛玻璃在部分浏览器上不生效？ 确认是否同时写了 -webkit-backdrop-filter；Firefox 旧版本不支持该属性，可检测后用半透明背景降级，视觉依然可用。

Q: 玻璃后面必须有背景图吗？ 不一定，但纯白背景看不出玻璃感。至少放一个渐变或彩色形状，模糊才有内容可「磨」。

Q: 怎么让玻璃按钮支持深色主题？ 降低底色亮度（如 rgba(10,15,40,.4)，即演示区深色玻璃），同时把边缘高光从白色改为微弱的蓝色高光。