RippleButton
Button that answers each click with a ripple of light from the click point, a soft glow and two fine rings spreading out like a wave; on hover a glow follows the pointer with a faint ring pulsing from it
Preview
<script lang="ts">
import { RippleButton } from 'fancy-ui-svelte';
</script>
<RippleButton />Installation
Usage
<script lang="ts">
import { RippleButton } from 'fancy-ui-svelte';
</script>
<RippleButton />Examples
Basic Usage
<script lang="ts">
import { RippleButton } from "$lib/fancy-ui/ripple-button";
</script>
<RippleButton sound>Click me</RippleButton>Custom Ripple Colors
Customize the ripple color.
<script lang="ts">
import { RippleButton } from "$lib/fancy-ui/ripple-button";
</script>
<div class="flex flex-wrap justify-center gap-4">
<RippleButton sound rippleColor="#ADD8E6">Light Blue</RippleButton>
<RippleButton sound rippleColor="#90EE90">Light Green</RippleButton>
<RippleButton sound rippleColor="#FFB6C1">Light Pink</RippleButton>
<RippleButton sound rippleColor="#FFD700">Gold</RippleButton>
</div>Animation Duration
Control the ripple speed.
<script lang="ts">
import { RippleButton } from "$lib/fancy-ui/ripple-button";
</script>
<div class="flex flex-wrap justify-center gap-4">
<RippleButton sound duration={300}>Fast (300ms)</RippleButton>
<RippleButton sound duration={600}>Default (600ms)</RippleButton>
<RippleButton sound duration={1000}>Slow (1000ms)</RippleButton>
</div>Custom Styling
Override styles with the class prop.
<script lang="ts">
import { RippleButton } from "$lib/fancy-ui/ripple-button";
</script>
<div class="flex flex-wrap justify-center gap-4">
<RippleButton
sound
class="bg-primary text-primary-foreground border-primary"
rippleColor="#ffffff"
>
Primary
</RippleButton>
<RippleButton sound class="bg-destructive border-destructive text-white" rippleColor="#ffffff">
Destructive
</RippleButton>
<RippleButton sound class="rounded-full px-6" rippleColor="#9333ea">Rounded</RippleButton>
</div>Multiple Ripples
Click rapidly to see multiple ripples.
<script lang="ts">
import { RippleButton } from "$lib/fancy-ui/ripple-button";
</script>
<RippleButton sound class="px-12 py-4 text-lg" rippleColor="#8B5CF6" duration={800}>
Click rapidly!
</RippleButton>Props
| Prop | Type | Default | Description |
|---|---|---|---|
rippleColor | string | "#60a5fa" | Colour of the ripple: its glow, its rings and the border tint |
duration | number | 900 | Animation duration in milliseconds |
sound | boolean | false | Plays the press cue on activation, once the user has enabled sound |
Slots
| Slot | Description |
|---|---|
children | Button content |
Links
Related components
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
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
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