BUTTON
光泽扫过按钮Shine Sweep Button
一道斜向的白色光带从按钮左端扫到右端，像抛光金属表面的反光划过。
效果预览
适合用在哪
促销按钮、会员购买按钮、任何想让 CTA 更"贵"的场景。
容易踩的坑
- 忘记给按钮加 overflow:hidden，斜切光带会溢出按钮边界露在外面。
- 自动循环版间隔短于 2 秒，扫光变成持续闪烁，干扰阅读且违反 prefers-reduced-motion。
- 在浅色或白底按钮上用白色光带，几乎看不见，白白增加动画开销。
设计提示词 · Prompt
光泽扫过按钮（Shine Sweep Button）：按钮 overflow:hidden + position:relative；::after 是一道竖向光带——width:30-40%、上下超出按钮 4px、background:linear-gradient(100deg, transparent, rgba(255,255,255,.45), transparent)、transform:skewX(-18deg)、初始 left:-55%。悬停时 left 过渡到 125%（时长 .5-.7s、ease），光带就像从左到右扫过一次。也可以做成每 3s 自动扫一次的循环版（用 keyframes 控制 left）。深色按钮上效果最明显。
Shine Sweep Button: button with overflow:hidden + position:relative; ::after is a vertical light band — width:30-40%, extending 4px beyond the button top and bottom, background:linear-gradient(100deg, transparent, rgba(255,255,255,.45), transparent), transform:skewX(-18deg), initial left:-55%. On hover, left transitions to 125% (duration .5-.7s, ease), so the band sweeps once from left to right. It can also be made into a looping version that sweeps automatically every 3s (control left with keyframes). The effect is most visible on dark buttons.
常见搭配
同一页面里经常和「光泽扫过按钮」一起出现的模式，可以收藏后用「组合收藏为整页提示词」一起交给 AI。
演示 HTML 结构
<div class="s" style="display:flex;justify-content:center;padding:20px 0"> <button class="d-shinebtn">升级到 Pro</button> </div>