Buttons Fancy Stable
ShimmerButton
Pill button with a satin sheen: a soft band of light sweeps across the face and lifts the label, then rests; on hover the highlight follows the pointer
Preview
svelte
<script lang="ts">
import { ShimmerButton } from 'fancy-ui-svelte';
</script>
<ShimmerButton />Installation
pnpm add fancy-ui-svelte
import { ShimmerButton } from 'fancy-ui-svelte'
Usage
svelte
<script lang="ts">
import { ShimmerButton } from 'fancy-ui-svelte';
</script>
<ShimmerButton />Examples
Basic Usage
svelte
<script lang="ts">
import { ShimmerButton } from "$lib/fancy-ui/shimmer-button";
</script>
<ShimmerButton sound>Shimmer</ShimmerButton>Shimmer Colors
Change the shimmer highlight color.
svelte
<script lang="ts">
import { ShimmerButton } from "$lib/fancy-ui/shimmer-button";
</script>
<div class="flex flex-wrap justify-center gap-4">
<div class="flex flex-col items-center gap-2">
<ShimmerButton sound shimmerColor="#ffffff">White</ShimmerButton>
<span class="text-muted-foreground text-xs">#ffffff</span>
</div>
<div class="flex flex-col items-center gap-2">
<ShimmerButton sound shimmerColor="#60a5fa">Blue</ShimmerButton>
<span class="text-muted-foreground text-xs">#60a5fa</span>
</div>
<div class="flex flex-col items-center gap-2">
<ShimmerButton sound shimmerColor="#f472b6">Pink</ShimmerButton>
<span class="text-muted-foreground text-xs">#f472b6</span>
</div>
<div class="flex flex-col items-center gap-2">
<ShimmerButton sound shimmerColor="#4ade80">Green</ShimmerButton>
<span class="text-muted-foreground text-xs">#4ade80</span>
</div>
</div>Animation Speed
Control the shimmer speed.
svelte
<script lang="ts">
import { ShimmerButton } from "$lib/fancy-ui/shimmer-button";
</script>
<div class="flex flex-wrap justify-center gap-4">
<div class="flex flex-col items-center gap-2">
<ShimmerButton sound shimmerDuration="1.5s">Fast (1.5s)</ShimmerButton>
<span class="text-muted-foreground text-xs">shimmerDuration="1.5s"</span>
</div>
<div class="flex flex-col items-center gap-2">
<ShimmerButton sound shimmerDuration="3s">Default (3s)</ShimmerButton>
<span class="text-muted-foreground text-xs">shimmerDuration="3s"</span>
</div>
<div class="flex flex-col items-center gap-2">
<ShimmerButton sound shimmerDuration="6s">Slow (6s)</ShimmerButton>
<span class="text-muted-foreground text-xs">shimmerDuration="6s"</span>
</div>
</div>Shimmer Size
Adjust the border thickness.
svelte
<script lang="ts">
import { ShimmerButton } from "$lib/fancy-ui/shimmer-button";
</script>
<div class="flex flex-wrap justify-center gap-4">
<div class="flex flex-col items-center gap-2">
<ShimmerButton sound shimmerSize="0.03em">Thin</ShimmerButton>
<span class="text-muted-foreground text-xs">0.03em</span>
</div>
<div class="flex flex-col items-center gap-2">
<ShimmerButton sound shimmerSize="0.05em">Default</ShimmerButton>
<span class="text-muted-foreground text-xs">0.05em</span>
</div>
<div class="flex flex-col items-center gap-2">
<ShimmerButton sound shimmerSize="0.1em">Thick</ShimmerButton>
<span class="text-muted-foreground text-xs">0.1em</span>
</div>
</div>Custom Background
Set a custom background color.
svelte
<script lang="ts">
import { ShimmerButton } from "$lib/fancy-ui/shimmer-button";
</script>
<div class="flex flex-wrap justify-center gap-4">
<ShimmerButton sound background="rgba(59, 130, 246, 0.8)" shimmerColor="#93c5fd"
>Blue</ShimmerButton
>
<ShimmerButton sound background="rgba(139, 92, 246, 0.8)" shimmerColor="#c4b5fd"
>Purple</ShimmerButton
>
<ShimmerButton sound background="rgba(20, 83, 45, 0.9)" shimmerColor="#86efac"
>Green</ShimmerButton
>
</div>Border Radius
Change the button shape.
svelte
<script lang="ts">
import { ShimmerButton } from "$lib/fancy-ui/shimmer-button";
</script>
<div class="flex flex-wrap justify-center gap-4">
<div class="flex flex-col items-center gap-2">
<ShimmerButton sound borderRadius="8px">Rounded</ShimmerButton>
<span class="text-muted-foreground text-xs">8px</span>
</div>
<div class="flex flex-col items-center gap-2">
<ShimmerButton sound borderRadius="100px">Pill (default)</ShimmerButton>
<span class="text-muted-foreground text-xs">100px</span>
</div>
<div class="flex flex-col items-center gap-2">
<ShimmerButton sound borderRadius="0px">Square</ShimmerButton>
<span class="text-muted-foreground text-xs">0px</span>
</div>
</div>Props
| Prop | Type | Default | Description |
|---|---|---|---|
shimmerColor | string | "#ffffff" | Colour of the sheen, rim and hover highlight |
shimmerSize | string | "0.05em" | Thickness of the rim that catches the sheen |
borderRadius | string | "100px" | Button border radius |
shimmerDuration | string | "3s" | Duration of one sheen cycle: the sweep, then a pause |
background | string | "rgba(0, 0, 0, 1)" | Button background color |
sound | boolean | false | Plays the press cue on activation, once the user has enabled sound |
Slots
| Slot | Description |
|---|---|
children | Button content |
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
In
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
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