Buttons Fancy Stable
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
Preview
svelte
<script lang="ts">
import { GradientButton } from 'fancy-ui-svelte';
</script>
<GradientButton />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
svelte
<script lang="ts">
import { GradientButton } from "$lib/fancy-ui/gradient-button";
</script>
<GradientButton sound class="font-medium text-white">Click me</GradientButton>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 sound colors={["#3b82f6", "#8b5cf6", "#3b82f6"]} class="font-medium text-white">
Blue → 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 → 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 → 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 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 "$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 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 "$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 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 "$lib/fancy-ui/gradient-button";
</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 "$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: 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>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 |
Slots
| Slot | Description |
|---|---|
children | Button content |
Links
Related components
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
Ra
RainbowButton
Animated button with a rainbow gradient border; on hover or focus a rainbow beam rides around the border with a soft halo
Buttons Stable