BUTTON
流光边框按钮Border Beam Button
一圈亮光只沿着按钮描边转，按钮脸上保持安静。
效果预览
适合用在哪
定价页的推荐档、深色页面上需要被看见、但又不想整颗发光的主 CTA。
容易踩的坑
- 锥形渐变铺满整圈且颜色很满，看起来像彩虹描边，不再是「一束光在走」。
- 光环用了 z-index:-1 但按钮没有 isolation，光被卡片背景吃掉。
- 和发光按钮叠在同一个 CTA 上，脸上有光晕、边上又有光，主次一起糊掉。
设计提示词 · Prompt
流光边框按钮（Border Beam Button）：外圈 1.5px，用 conic-gradient 只让约 20% 的弧发亮（青→品红），其余透明。用 @property 注册一个角度，让渐变的 from 在 2.5-3.5s 内转一圈。内层是实心深色圆角面，光只走在描边上，不要铺满按钮脸（那是扫光）也不要在按钮外再糊一圈（那是发光）。按钮设 isolation:isolate，避免负 z-index 的光环掉到卡片背景后面。一屏只用一颗。prefers-reduced-motion 时停在一帧静态渐变边。
Border Beam Button: a 1.5px outer ring using a conic-gradient where only about 20% of the arc is bright (cyan to magenta) and the rest is transparent. Register an angle with @property and rotate the gradient's from angle over 2.5-3.5s. The inner face is a solid dark rounded fill — the light travels the border only. Don't flood the button face (that is a shine sweep) and don't blur a halo outside the button (that is a glow). Set isolation:isolate on the button so a negative z-index ring doesn't fall behind the card background. Use only one per screen. Under prefers-reduced-motion, freeze on a single static gradient frame.
常见搭配
同一页面里经常和「流光边框按钮」一起出现的模式，可以收藏后用「组合收藏为整页提示词」一起交给 AI。
演示 HTML 结构
<div class="s" style="display:flex;justify-content:center;padding:16px 0"> <button class="d-beambtn" type="button"><span>立即升级</span></button> </div>