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

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

## Import

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

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `colors` | `string[]` | `["#34d399","#22d3ee","#6366f1","#d946ef","#f43f5e","#f59e0b"]` | Colours of the beam, spread along its arc |
| `duration` | `number` | `3000` | Time for the beam to travel once around the button, in milliseconds |
| `borderWidth` | `number` | `1.5` | Width of the lit border in pixels |
| `borderRadius` | `number` | `12` | Border radius in pixels |
| `blur` | `number` | `4` | Softness of the glow the beam casts inside the button, in pixels |
| `bgColor` | `string` | `"#161616"` | Background color of the button face |
| `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 { GradientButton } from "fancy-ui-svelte";
</script>

<GradientButton sound class="font-medium text-white">Click me</GradientButton>
```

### Custom Colors

Change the gradient colors.

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

<div class="flex flex-wrap justify-center gap-4">
	<div class="flex flex-col items-center gap-2">
		<GradientButton sound colors={["#3b82f6", "#8b5cf6", "#3b82f6"]} class="font-medium text-white">
			Blue &rarr; Purple
		</GradientButton>
		<span class="text-muted-foreground text-xs">Blue / Purple</span>
	</div>
	<div class="flex flex-col items-center gap-2">
		<GradientButton sound colors={["#f43f5e", "#fb923c", "#f43f5e"]} class="font-medium text-white">
			Rose &rarr; Orange
		</GradientButton>
		<span class="text-muted-foreground text-xs">Rose / Orange</span>
	</div>
	<div class="flex flex-col items-center gap-2">
		<GradientButton sound colors={["#10b981", "#06b6d4", "#10b981"]} class="font-medium text-white">
			Emerald &rarr; Cyan
		</GradientButton>
		<span class="text-muted-foreground text-xs">Emerald / Cyan</span>
	</div>
</div>
```

### Border Width & Blur

Adjust thickness and softness.

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

<div class="flex flex-wrap justify-center gap-4">
	<div class="flex flex-col items-center gap-2">
		<GradientButton sound borderWidth={1} blur={2} class="font-medium text-white">
			Thin & Sharp
		</GradientButton>
		<span class="text-muted-foreground text-xs">1px / 2px blur</span>
	</div>
	<div class="flex flex-col items-center gap-2">
		<GradientButton sound borderWidth={2} blur={4} class="font-medium text-white"
			>Default</GradientButton
		>
		<span class="text-muted-foreground text-xs">2px / 4px blur</span>
	</div>
	<div class="flex flex-col items-center gap-2">
		<GradientButton sound borderWidth={4} blur={8} class="font-medium text-white">
			Thick & Soft
		</GradientButton>
		<span class="text-muted-foreground text-xs">4px / 8px blur</span>
	</div>
</div>
```

### Animation Speed

Control the rotation speed.

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

<div class="flex flex-wrap justify-center gap-4">
	<div class="flex flex-col items-center gap-2">
		<GradientButton sound duration={1000} class="font-medium text-white">Fast</GradientButton>
		<span class="text-muted-foreground text-xs">1000ms</span>
	</div>
	<div class="flex flex-col items-center gap-2">
		<GradientButton sound duration={2500} class="font-medium text-white">Default</GradientButton>
		<span class="text-muted-foreground text-xs">2500ms</span>
	</div>
	<div class="flex flex-col items-center gap-2">
		<GradientButton sound duration={5000} class="font-medium text-white">Slow</GradientButton>
		<span class="text-muted-foreground text-xs">5000ms</span>
	</div>
</div>
```

### Border Radius

Change the button shape.

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

<div class="flex flex-wrap justify-center gap-4">
	<div class="flex flex-col items-center gap-2">
		<GradientButton sound borderRadius={0} class="font-medium text-white">Square</GradientButton>
		<span class="text-muted-foreground text-xs">0px</span>
	</div>
	<div class="flex flex-col items-center gap-2">
		<GradientButton sound borderRadius={8} class="font-medium text-white">Rounded</GradientButton>
		<span class="text-muted-foreground text-xs">8px (default)</span>
	</div>
	<div class="flex flex-col items-center gap-2">
		<GradientButton sound borderRadius={100} class="font-medium text-white">Pill</GradientButton>
		<span class="text-muted-foreground text-xs">100px</span>
	</div>
</div>
```

### Background Color

Set the content area background.

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

<div class="flex flex-wrap justify-center gap-4">
	<GradientButton sound bgColor="#000" class="font-medium text-white"
		>Black (default)</GradientButton
	>
	<GradientButton sound bgColor="#1e293b" class="font-medium text-white">Slate</GradientButton>
	<GradientButton sound bgColor="#18181b" class="font-medium text-white">Zinc</GradientButton>
</div>
```

### Interactive Playground

```svelte
<script lang="ts">
	import { GradientButton } from "fancy-ui-svelte";
	import PropsPlayground from "$lib/components/PropsPlayground.svelte";
</script>

<PropsPlayground
	controls={[
		{ key: "duration", type: "range", label: "Duration (ms)", min: 500, max: 8000, step: 100 },
		{ key: "borderWidth", type: "range", label: "Border Width", min: 1, max: 6, step: 0.5 },
		{ key: "borderRadius", type: "range", label: "Border Radius", min: 0, max: 100, step: 2 },
		{ key: "blur", type: "range", label: "Blur", min: 0, max: 16, step: 1 },
		{ key: "bgColor", type: "color", label: "Background Color" },
	]}
	initialValues={{
		duration: 3000,
		borderWidth: 1.5,
		borderRadius: 12,
		blur: 4,
		bgColor: "#161616",
	}}
>
	{#snippet preview(values)}
		<div class="flex items-center justify-center py-8">
			<GradientButton
				sound
				duration={values.duration as number}
				borderWidth={values.borderWidth as number}
				borderRadius={values.borderRadius as number}
				blur={values.blur as number}
				bgColor={values.bgColor as string}
				class="font-medium text-white"
			>
				Click me
			</GradientButton>
		</div>
	{/snippet}
</PropsPlayground>
```