AnimatedBorderButton NEW
Button/link with animated gradient border effect.
Preview/Playground
Created by 
Prashanth
Astro ---
import AnimatedBorderButton from "@astroanimate/core/AnimatedBorderButton";
---
<AnimatedBorderButton>
Click me
</AnimatedBorderButton>Installation
bash
npm install @astroanimate/coreUsage
---
import AnimatedBorderButton from "@astroanimate/core/AnimatedBorderButton";
---
<AnimatedBorderButton />Renders the AnimatedBorderButton component with AstroAnimate defaults.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
as | "button" | "a" | "button" | Element type |
href | string | - | Required if as="a" |
type | "button" | "submit" | "reset" | "button" | Button type |
class | string | "" | Additional CSS classes |
Use When
- Primary/secondary CTA buttons with subtle hover feedback
- Inline links styled as buttons
- Interaction-based animation only on hover
Avoid When
- Continuous animations required
- Complex state-driven components
Accessibility
- Supports
:focus-visible -
Respects
prefers-reduced-motion
Performance
- CSS-only (no JavaScript)
- Animation runs only on hover
Credits
- Credit to @Prashanth
