Animated Gradient Border
A button or card where a vibrant gradient beam continuously travels around its perimeter, similar to a meteor running along a track.
Live Demo
Hover to intensify the glow
What It Is
A button or card where a vibrant gradient beam continuously travels around its perimeter, similar to a meteor running along a track.
✓When to Use
- Primary Call-to-Action (CTA) buttons
- Upgrading to "Pro" tier sections
✕When NOT to Use
- Secondary or destructive buttons
- Inside busy UI components
Configuration Tips
- 01Use a conic-gradient spinning in the background, masked to only show at the 1px border gap
You've Seen It In
Prompt Templates
Copy and paste these prompts into your AI coding assistant.
Create a dark button with a glowing border. A conic gradient should spin infinitely in the background, but only be visible through the 2px padding simulating the border.
Code Example (Tailwind CSS)
export function MeteorBorderButtonDemo() {}Related Effects
Ripple Effect
A circular wave that expands from the point of contact when a user clicks or taps an element, providing immediate spatial feedback.
Hover Lift Effect
A card or button smoothly translates upwards by a few pixels and increases its shadow cast, creating the illusion of moving closer to the user on hover.