Interaction
闪光按钮
带有移动斜向高光和微妙边框发光的按钮。
作者:mcpSkills
框架
nextjs
UI 库
shadcntailwind
难度intermediate
英文提示词
Create a single CTA button with a shimmer effect. The button should have a dark background, a subtle border, and a diagonal white/transparent highlight that sweeps across the button continuously. Add a faint outer glow that pulses subtly. Use CSS mask or background-position animation for the shimmer. Use Tailwind CSS. Place on a dark background so the shimmer and glow read clearly.
中文提示词
创建一个带闪光效果的单一 CTA 按钮。按钮使用深色背景、微妙边框,以及一道连续斜向扫过的白/透明高光。添加轻微脉冲外发光。使用 CSS mask 或 background-position 动画实现闪光。使用 Tailwind CSS。放置在深色背景上,使闪光和发光清晰可见。

Overview
使用扫过闪光吸引注意力的按钮,避免看起来像通用渐变。
Features
- 深色按钮表面
- 斜向闪光扫过
- 微妙边框
- 脉冲外发光
- CSS 驱动动画
- 针对深色背景优化
Usage
用作深色落地页、弹窗或 hero 区域的主 CTA。
Customization
修改 prompt 以:
- 将白色闪光改为彩色闪光
- 仅悬停时触发闪光
- 与渐变边框结合
- 使用圆角或胶囊形