ArrowCTAButton NEW
Button/link with animated underline and sliding arrow hover effect.
Preview/Playground
Created by 
Prashanth
Astro ---
import ArrowCTAButton from "@astroanimate/core/ArrowCTAButton";
---
<ArrowCTAButton label="Explore" />Installation
bash
npm install @astroanimate/coreUsage
---
import ArrowCTAButton from "@astroanimate/core/ArrowCTAButton";
---
<ArrowCTAButton />Renders the ArrowCTAButton component with AstroAnimate defaults.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
as | "button" | "a" | "button" | Element type |
href | string | - | Required if as="a" |
label | string | - | Button text |
type | "button" | "submit" | "reset" | "button" | Button type |
class | string | "" | Additional CSS classes |
Use When
- Text-based CTA links
- Minimal landing page actions
- Inline navigation with subtle hover feedback
Avoid When
- Large button layouts required
- Complex interaction states needed
Accessibility
- Supports
:focus-visible - Uses
aria-label -
Decorative SVG arrow uses
aria-hidden="true" -
Respects
prefers-reduced-motion
Performance
- CSS-only hover animations
- No JavaScript required
Credits
- Credit to @Prashanth
