# InteractiveHoverButton

> Button whose dot opens into a circle that fills it on hover, while the label rolls up and out and returns with an arrow.

- Package: `fancy-ui-svelte` (Svelte 5 + Tailwind CSS v4)
- Category: Buttons
- Tags: button, hover, animation, interactive, reveal
- Docs: https://fancy-ui.rama.app/docs/components/interactive-hover-button
- Source: https://github.com/RamaHerbin/fancy-ui/tree/main/src/lib/fancy-ui/interactive-hover-button

## Import

```svelte
<script lang="ts">
  import { InteractiveHoverButton } from 'fancy-ui-svelte';
</script>
```

Setup (once per project): `npm install fancy-ui-svelte`, then add `@import "fancy-ui-svelte/tailwind.css";` after `@import "tailwindcss";` in your main CSS file. Full guide: https://fancy-ui.rama.app/llms.txt

React: `import { InteractiveHoverButton } from 'fancy-ui-react';` (same prop names; `class` becomes `className`, snippets become `ReactNode`).

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `text` | `string` | `"Button"` | Button label text (used when children slot is not provided) |
| `sound` | `boolean` | `false` | Plays the press cue on activation, once the user has enabled sound |

## Snippets

| Snippet | Description |
| --- | --- |
| `children` | Button content (overrides text prop) |

## Examples

### Basic Usage

```svelte
<script lang="ts">
	import { InteractiveHoverButton } from "fancy-ui-svelte";
</script>

<InteractiveHoverButton sound />
```

### Custom Text

```svelte
<script lang="ts">
	import { InteractiveHoverButton } from "fancy-ui-svelte";
</script>

<div class="flex items-center gap-4">
	<InteractiveHoverButton sound text="Get Started" />
	<InteractiveHoverButton sound text="Learn More" />
	<InteractiveHoverButton sound text="Subscribe" />
</div>
```

### Custom Styling

```svelte
<script lang="ts">
	import { InteractiveHoverButton } from "fancy-ui-svelte";
</script>

<div class="flex items-center gap-4">
	<InteractiveHoverButton
		sound
		text="Danger"
		class="border-red-500/30 [--ihb-fill-foreground:#fff] [--ihb-fill:#ef4444]"
	/>
	<InteractiveHoverButton
		sound
		text="Success"
		class="border-green-500/30 [--ihb-fill-foreground:#fff] [--ihb-fill:#22c55e]"
	/>
</div>
```