Getting Started
Components
Special Effects
Animations
Text Animations
Backgrounds
A visually engaging button component that responds to hover with dynamic transitions, adapting smoothly between light and dark modes for enhanced user interactivity.
@lucide/svelte
Installation
pnpm dlx shadcn-svelte@latest add https://sv-animations.vercel.app/r/interactive-hover-button.json
Install dependencies
Install the required packages for this component:
pnpm add @lucide/svelte
Copy the Source Code
Copy and paste the following code into your project:
interactive-hover-button.svelte
index.ts
Folder Structure
Folder Structure
Props
InteractiveHoverButton
A component for Interactive Hover Button.
| Name | Type | Default | Description |
|---|---|---|---|
class | string | "" | Additional CSS classes to apply |
children | Snippet | required | The content to display inside the button |