BUTTON
玻璃按钮Glass Button
半透明底加细白边，背后的颜色被磨砂透出来，像一块放在画面上的玻璃。
效果预览
适合用在哪
深色或有大色块的首屏、图片上的次级 CTA、和玻璃卡片成套的操作。
容易踩的坑
- 背后是纯灰或纯白，磨砂没有颜色可透，按钮变成一块发脏的半透明块。
- backdrop-filter 未做降级，不支持的浏览器里按钮近乎全透明，白字直接浮在花背景上。
- 和另一颗实心主按钮放在同一行，玻璃的权重不够，用户会忽略它。
设计提示词 · Prompt
玻璃按钮（Glass Button）：按钮 background:rgba(255,255,255,.16)、1px 描边 rgba(255,255,255,.45)、backdrop-filter:blur(12px)、白字 600 字重、圆角 10-12px、高度 44-48px。内阴影 inset 0 1px 0 rgba(255,255,255,.4) 做出上沿高光。背后必须有彩色形状或图片，磨砂才有东西可透；纯灰底上不要用。悬停时背景透明度升到 .28。浅色页面改成 rgba(255,255,255,.55) 底 + 深色字。它适合深色首屏的主按钮，或浅色页面上的次按钮，不要和另一颗实心主按钮抢同一屏的唯一焦点。
Glass Button: background:rgba(255,255,255,.16), a 1px border at rgba(255,255,255,.45), backdrop-filter:blur(12px), white text at weight 600, border radius 10-12px, height 44-48px. An inner shadow inset 0 1px 0 rgba(255,255,255,.4) makes the top-edge highlight. There must be a colored shape or image behind it, otherwise the frost has nothing to show through; don't use it on a flat gray field. On hover, raise the background alpha to .28. On light pages switch to an rgba(255,255,255,.55) fill with dark text. It works as the primary button on a dark hero, or as a secondary button on a light page — don't let it compete with another solid primary on the same screen.
常见搭配
同一页面里经常和「玻璃按钮」一起出现的模式，可以收藏后用「组合收藏为整页提示词」一起交给 AI。
演示 HTML 结构
<div class="s d-glassdemo"> <i class="d-glassdemo__a" aria-hidden="true"></i> <i class="d-glassdemo__b" aria-hidden="true"></i> <button class="d-glassbtn" type="button">开始使用</button> </div>