Buttons Fancy Stable
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
Preview
svelte
<script lang="ts">
import { InteractiveHoverButton } from 'fancy-ui-svelte';
</script>
<InteractiveHoverButton text="Hover Me" />Installation
pnpm add fancy-ui-svelte
import { InteractiveHoverButton } from 'fancy-ui-svelte'
Usage
svelte
<script lang="ts">
import { InteractiveHoverButton } from 'fancy-ui-svelte';
</script>
<InteractiveHoverButton />Examples
Basic Usage
svelte
<script lang="ts">
import { InteractiveHoverButton } from "$lib/fancy-ui/interactive-hover-button";
</script>
<InteractiveHoverButton sound />Custom Text
svelte
<script lang="ts">
import { InteractiveHoverButton } from "$lib/fancy-ui/interactive-hover-button";
</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 "$lib/fancy-ui/interactive-hover-button";
</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>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 |
Slots
| Slot | Description |
|---|---|
children | Button content (overrides text prop) |
Links
Related components
Gr
GradientButton
Dark button with a beam of light that travels around its border and casts a soft coloured glow inside the face; the glow brightens on hover
Buttons Stable
Pr
Pressable
A wrapper that gives any interactive child a consistent, cross-browser press animation — scale down on pointerdown/keydown, back to rest on release, with a static opacity fallback under reduced motion
Buttons Stable
Ra
RainbowButton
Animated button with a rainbow gradient border; on hover or focus a rainbow beam rides around the border with a soft halo
Buttons Stable