SlidingOverlayButton NEW
Button/link with sliding overlay animation on hover.
Preview/Playground
Created by 
Prashanth
Astro ---
import SlidingOverlayButton from "@astroanimate/core/SlidingOverlayButton";
---
<SlidingOverlayButton>
Get Started
</SlidingOverlayButton>Installation
bash
npm install @astroanimate/coreUsage
---
import SlidingOverlayButton from "@astroanimate/core/SlidingOverlayButton";
---
<SlidingOverlayButton />Renders the SlidingOverlayButton 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 directional hover feedback
- Navigation links styled as buttons
- Interfaces needing lightweight hover animation
Avoid When
- Persistent or looping animations needed
- Complex interactive button states required
Accessibility
- Supports
:focus-visible -
Respects
prefers-reduced-motion
Performance
- CSS-only interaction effects
- No JavaScript required
Credits
- Credit to @Prashanth
