# 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.

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

## Import

```svelte
<script lang="ts">
  import { ShimmerButton } 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 { ShimmerButton } from 'fancy-ui-react';` (same prop names; `class` becomes `className`, snippets become `ReactNode`).

## 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 |

## Snippets

| Snippet | Description |
| --- | --- |
| `children` | Button content |

## Examples

### Basic Usage

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

<ShimmerButton sound>Shimmer</ShimmerButton>
```

### Shimmer Colors

Change the shimmer highlight color.

```svelte
<script lang="ts">
	import { ShimmerButton } from "fancy-ui-svelte";
</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 "fancy-ui-svelte";
</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 "fancy-ui-svelte";
</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 "fancy-ui-svelte";
</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 "fancy-ui-svelte";
</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>
```