← 返回提示词
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。放置在深色背景上,使闪光和发光清晰可见。
闪光按钮 screenshot 1
## Overview 使用扫过闪光吸引注意力的按钮,避免看起来像通用渐变。 ## Features - 深色按钮表面 - 斜向闪光扫过 - 微妙边框 - 脉冲外发光 - CSS 驱动动画 - 针对深色背景优化 ## Usage 用作深色落地页、弹窗或 hero 区域的主 CTA。 ## Customization 修改 prompt 以: - 将白色闪光改为彩色闪光 - 仅悬停时触发闪光 - 与渐变边框结合 - 使用圆角或胶囊形