Animated Button
CSS-only animated button with shimmer, fill, and border variants. Renders as button or link based on href.
Preview/Playground
Created by 
Vipin
Astro import { AnimatedButton } from '@astroanimate/core/AnimatedButton';
<AnimatedButton variant="fill">Fill</AnimatedButton>
<AnimatedButton variant="shimmer">Shimmer</AnimatedButton>
<AnimatedButton variant="border">Border</AnimatedButton>
<AnimatedButton variant="none">None</AnimatedButton>
<AnimatedButton disabled>Disabled</AnimatedButton>
<AnimatedButton href="/docs">Go to docs</AnimatedButton>Installation
bash
npm install @astro-animate/buttonUsage
---
import AnimatedButton from "@astroanimate/core/AnimatedButton";
---
<AnimatedButton variant="shimmer">Explore</AnimatedButton>Applies hover animations using CSS only.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
variant | shimmer fill border none | none | Animation style |
href | string | - | Renders as link if provided |
class | string | “ ” | Additional CSS classes |
shimmer Color | string | "rgba(255, 255, 255, 0.4)" | Shimmer effect color (CSS color format) |
disabled | boolean | false | Disables interaction, hover effects, and animations |
...rest | any | - | Additional HTML attributes (id, data-, aria-, etc.) |
Validation
- Invalid variant values fallback to "none"
- Invalid shimmerColor values fallback to default
- You need a single component that can act as link or button.
Styling
- Includes default padding, border, and transition styles. These can be overridden using the class prop.
Internal Structure
- Decorative elements are rendered based on the selected variant and are marked with aria-hidden="true".
Link Behavior
- When href is provided, the component renders an <a> element instead of a <button>.
Use When
- Adding animated buttons with hover effects
- Need zero-JS animations for performance
- Require accessible animated components
Avoid When
- Complex JavaScript-based interactions needed
- Custom animation timing beyond CSS capabilities
Accessibility
- Respects prefers-reduced-motion media query
- Decorative elements marked with aria-hidden="true"
- Includes focus-visible outline styling
- All decorative elements are hidden from screen readers using aria-hidden
- Animations are disabled automatically when prefers-reduced-motion is enabled
Performance
- No client-side JavaScript is shipped or executed
Credits
- Credit to @vipin
