Interactive Hover Button
A button with an interactive hover effect where an expanding circle fills the button and an arrow slides in.
Installation
Usage
import InteractiveHoverButton from '$lib/registry/buttons/interactive-hover-button/interactive-hover-button.svelte';<InteractiveHoverButton class="px-8 py-3 rounded-full bg-background border">
Click Me
</InteractiveHoverButton>Props
| Prop | Type | Default | Description |
|---|---|---|---|
| class | string | '' | Additional CSS classes for custom styling |
| role | string | 'button' | The ARIA role of the element |
| hoverColor | string | 'hsl(var(--foreground))' | Background color of the expanding circle |
| textColor | string | 'hsl(var(--foreground))' | Text color in default state |
| hoverTextColor | string | 'hsl(var(--background))' | Text color on hover |
| duration | number | 400 | Animation duration in milliseconds |