GradientButton

Preview

Installation

pnpm add fancy-ui-svelte

import { GradientButton } from 'fancy-ui-svelte'

Usage

svelte

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

<GradientButton />

Examples

Basic Usage

Custom Colors

Change the gradient colors.

svelte

<script lang="ts">
	import { GradientButton } from "$lib/fancy-ui/gradient-button";
</script>

<div class="flex flex-wrap justify-center gap-4">
	<div class="flex flex-col items-center gap-2">
		<GradientButton 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 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 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 "$lib/fancy-ui/gradient-button";
</script>

<div class="flex flex-wrap justify-center gap-4">
	<div class="flex flex-col items-center gap-2">
		<GradientButton 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 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 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 "$lib/fancy-ui/gradient-button";
</script>

<div class="flex flex-wrap justify-center gap-4">
	<div class="flex flex-col items-center gap-2">
		<GradientButton 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 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 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 "$lib/fancy-ui/gradient-button";
</script>

<div class="flex flex-wrap justify-center gap-4">
	<div class="flex flex-col items-center gap-2">
		<GradientButton 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 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 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 "$lib/fancy-ui/gradient-button";
</script>

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

Interactive Playground

svelte

<script lang="ts">
	import { GradientButton } from "$lib/fancy-ui/gradient-button";
	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: 8, step: 1 },
		{ 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: 2500,
		borderWidth: 2,
		borderRadius: 8,
		blur: 4,
		bgColor: "#000000",
	}}
>
	{#snippet preview(values)}
		<div class="flex items-center justify-center py-8">
			<GradientButton
				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>

Props

Prop	Type	Default	Description
`colors`	string[]	`["#FF0000","#FFA500","#FFFF00","#008000","#0000FF","#4B0082","#EE82EE","#FF0000"]`	Gradient colors for the conic-gradient border
`duration`	number	`2500`	Animation duration in milliseconds
`borderWidth`	number	`2`	Border width in pixels
`borderRadius`	number	`8`	Border radius in pixels
`blur`	number	`4`	Blur amount for the gradient in pixels
`bgColor`	string	`"#000"`	Background color of the button content area