Interaction
Shimmer Button
A button with a moving shimmer diagonal highlight and subtle border glow.
by mcpSkills
Framework
nextjs
UI Library
shadcntailwind
Difficultyintermediate
English Prompt
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.
Chinese Prompt
创建一个带闪光效果的单一 CTA 按钮。按钮使用深色背景、微妙边框，以及一道连续斜向扫过的白/透明高光。添加轻微脉冲外发光。使用 CSS mask 或 background-position 动画实现闪光。使用 Tailwind CSS。放置在深色背景上，使闪光和发光清晰可见。
## Overview
A button that uses a sweeping shimmer to catch the eye without looking like a generic gradient.
## Features
- Dark button surface
- Diagonal shimmer sweep
- Subtle border
- Pulsing outer glow
- CSS-driven animation
- Dark background optimized
## Usage
Use as the primary CTA on dark landing pages, modals, or hero sections.
## Customization
Modify the prompt to:
- Add a color shimmer instead of white
- Trigger shimmer only on hover
- Combine with a gradient border
- Use a rounded vs pill shape