Gradient Button

1/**
2 * @author: @dorianbaffier
3 * @description: Gradient Button
4 * @version: 1.0.0
5 * @date: 2025-06-26
6 * @license: MIT
7 * @website: https://kokonutui.com
8 * @github: https://github.com/kokonut-labs/kokonutui
9 */
10 
11import { Button } from "@/components/ui/button";
12import { cn } from "@/lib/utils";
13 
14type ColorVariant = "emerald" | "purple" | "orange";
15 
16interface GradientColors {
17  dark: {
18    border: string;
19    overlay: string;
20    accent: string;
21    text: string;
22    glow: string;
23    textGlow: string;
24    hover: string;
25  };
26  light: {
27    border: string;
28    base: string;
29    overlay: string;
30    accent: string;
31    text: string;
32    glow: string;
33    hover: string;
34  };
35}
36 
37interface GradientButtonProps
38  extends React.ButtonHTMLAttributes<HTMLButtonElement> {
39  icon?: string;
40  label?: string;
41  className?: string;
42  variant?: ColorVariant;
43}
44 
45const gradientColors: Record<ColorVariant, GradientColors> = {
46  emerald: {
47    dark: {
48      border: "from-[#336C4F] via-[#0C1F21] to-[#0D6437]",
49      overlay: "from-[#347B52]/40 via-[#0C1F21] to-[#0D6437]/30",
50      accent: "from-[#87F6B7]/10 via-[#0C1F21] to-[#17362A]/50",
51      text: "from-[#8AEECA] to-[#73F8A8]",
52      glow: "rgba(135,246,183,0.1)",
53      textGlow: "rgba(135,246,183,0.4)",
54      hover: "from-[#17362A]/20 via-[#87F6B7]/10 to-[#17362A]/20",
55    },
56    light: {
57      border: "from-emerald-400 via-emerald-300 to-emerald-200",
58      base: "from-emerald-50 via-emerald-50/80 to-emerald-50/90",
59      overlay: "from-emerald-300/30 via-emerald-200/20 to-emerald-400/20",
60      accent: "from-emerald-400/20 via-emerald-300/10 to-emerald-200/30",
61      text: "from-emerald-700 to-emerald-600",
62      glow: "rgba(52,211,153,0.2)",
63      hover: "from-emerald-300/30 via-emerald-200/20 to-emerald-300/30",
64    },
65  },
66  purple: {
67    dark: {
68      border: "from-[#6B46C1] via-[#0C1F21] to-[#553C9A]",
69      overlay: "from-[#7E22CE]/40 via-[#0C1F21] to-[#6B46C1]/30",
70      accent: "from-[#E9D8FD]/10 via-[#0C1F21] to-[#44337A]/50",
71      text: "from-[#E9D8FD] to-[#D6BCFA]",
72      glow: "rgba(159,122,234,0.1)",
73      textGlow: "rgba(159,122,234,0.4)",
74      hover: "from-[#44337A]/20 via-[#B794F4]/10 to-[#44337A]/20",
75    },
76    light: {
77      border: "from-purple-400 via-purple-300 to-purple-200",
78      base: "from-purple-50 via-purple-50/80 to-purple-50/90",
79      overlay: "from-purple-300/30 via-purple-200/20 to-purple-400/20",
80      accent: "from-purple-400/20 via-purple-300/10 to-purple-200/30",
81// … truncated