FillHoverButton NEW
Button/link with animated underline and background fill hover effect.
Preview/Playground
Created by 
Prashanth
Astro ---
import FillHoverButton from "@astroanimate/core/FillHoverButton";
---
<FillHoverButton>
Get Started
</FillHoverButton>Installation
bash
npm install @astroanimate/coreUsage
---
import FillHoverButton from "@astroanimate/core/FillHoverButton";
---
<FillHoverButton />Renders the FillHoverButton 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
- CTA buttons with layered hover feedback
- Minimal hero section actions
- Text-focused interactive buttons
Avoid When
- Persistent background animations needed
- Complex button states required
Accessibility
- Supports
:focus-visible -
Respects
prefers-reduced-motion
Performance
- CSS-only hover effects
- No JavaScript required
Credits
- Credit to @Prashanth
