border-gradient-button

1import { Button } from "@/components/ui/button";
2import { cn } from "@/lib/utils";
3 
4interface BorderGradientButtonProps {
5  colors?: [string, string, string, string, string];
6  className?: string;
7  children?: React.ReactNode;
8}
9 
10const defaultColors: [string, string, string, string, string] = [
11  "var(--color-1)",
12  "var(--color-5)",
13  "var(--color-3)",
14  "var(--color-4)",
15  "var(--color-2)",
16];
17 
18const BorderGradientButton = ({
19  colors = defaultColors,
20  className,
21  children,
22}: BorderGradientButtonProps) => {
23  return (
24    <Button
25      className={cn(
26        "relative rounded-md animate-rainbow bg-[length:200%] active:scale-[0.95] group",
27        className,
28      )}
29      style={{
30        backgroundImage: `linear-gradient(45deg, ${colors.join(",")})`,
31      }}
32    >
33      <div className="z-0 absolute inset-[1.5px] bg-background/95 group-hover:bg-background/40 backdrop-blur-3xl rounded-sm transition-all saturate-200" />
34      <span className="z-10 text-foreground pointer-events-none">
35        {children ?? "Gradient Border"}
36      </span>
37    </Button>
38  );
39};
40 
41export default BorderGradientButton;