BUTTON
渐变发光按钮Gradient Glow Button
渐变实心按钮外再包一圈同色系的模糊光晕，像按钮在微微发光。
效果预览
适合用在哪
深色页面的主 CTA；AI、游戏、加密类产品的转化按钮。
容易踩的坑
- 伪元素 z-index:-1 但父级没建立层叠上下文，光晕会跑到区块背景后面看不见。
- 一屏多个发光按钮同时存在，光晕互相叠加，主次不分且浅色背景下发脏。
- blur 半径超过 20px 且悬停时持续过渡，低端设备上会明显掉帧。
设计提示词 · Prompt
渐变发光按钮（Gradient Glow Button）：按钮本体 background:linear-gradient(135deg,靛蓝,品红)、圆角 10-14px、白字 600 字重。发光用伪元素 ::after 实现——与按钮同尺寸但 inset:-3px、同渐变背景、filter:blur(10-16px)、opacity:.5、z-index:-1，形成一圈柔光。悬停时按钮上移 1px、光晕 opacity 升到 .8、本体加同色系 box-shadow。深色背景上效果最佳；浅色背景上把光晕透明度减半，否则会脏。
Gradient Glow Button: the button body uses background:linear-gradient(135deg, indigo, magenta), border radius 10-14px, white text at 600 weight. The glow is implemented with the pseudo-element ::after — same size as the button but inset:-3px, same gradient background, filter:blur(10-16px), opacity:.5, z-index:-1, forming a soft halo. On hover the button moves up 1px, the glow opacity rises to .8, and the body gets a same-hue box-shadow. Works best on dark backgrounds; on light backgrounds halve the glow opacity, otherwise it looks dirty.
常见搭配
同一页面里经常和「渐变发光按钮」一起出现的模式，可以收藏后用「组合收藏为整页提示词」一起交给 AI。
演示 HTML 结构
<div class="s" style="display:flex;justify-content:center;padding:20px 0"> <button class="d-glowbtn">开始免费试用 →</button> </div>