bg-animate-button

1import * as React from "react"
2import { Slot } from "@radix-ui/react-slot"
3import { cva } from "class-variance-authority"
4 
5import { cn } from "@/lib/utils"
6 
7const outerDivVariants = cva("relative inline-block overflow-hidden ", {
8  variants: {
9    size: {
10      sm: "",
11      default: "",
12      lg: "",
13    },
14    rounded: {
15      full: "rounded-full before:rounded-full",
16      xl: "rounded-xl before:rounded-xl",
17      "2xl": "rounded-2xl before:rounded-2xl",
18      "3xl": "rounded-3xl before:rounded-3xl",
19      sm: "rounded-sm before:rounded-sm",
20      xs: "rounded-xs before:rounded-xs",
21      base: "rounded before:rounded",
22    },
23  },
24  defaultVariants: {
25    size: "default",
26  },
27})
28 
29const innerSpanVariants = cva(
30  [
31    "absolute inset-[-1000%] m-auto block ", // Base styles for positioning and display
32  ],
33  {
34    variants: {
35      animation: {
36        pulse: "animate-pulse", // Pulsating effect
37        "spin-fast": "animate-[spin_2s_linear_infinite]", // Continuous rotation
38        "spin-slow": "animate-[spin_8s_linear_infinite]", // Bouncing effect
39        spin: "animate-[spin_4s_linear_infinite]", // Bouncing effect
40        // Add more animations here
41      },
42      gradient: {
43        sunrise: "text-black font-bold",
44        ocean:
45          "bg-[conic-gradient(from_90deg_at_50%_50%,#a1c4fd_0%,#c2e9fb_50%,#a1c4fd_100%)] ",
46        candy:
47          "bg-[conic-gradient(from_90deg_at_50%_50%,#ff9a9e_0%,#fad0c4_50%,#fad0c4_90%,#ff9a9e_100%)] ",
48        forest:
49          "bg-[conic-gradient(from_90deg_at_50%_50%,#85d797_0%,#1a806b_50%,#85d797_100%)] ",
50        sunset:
51          "bg-[conic-gradient(from_90deg_at_50%_50%,#fe5d75_0%,#f5af19_50%,#fe5d75_100%)] ",
52        nebula:
53          "bg-[conic-gradient(from_90deg_at_50%_50%,#A77BFE_0%,#8860D0_50%,#A77BFE_100%)] ",
54        default:
55          "bg-[conic-gradient(from_90deg_at_50%_50%,#E2CBFF_0%,#393BB2_50%,#E2CBFF_100%)] ",
56      },
57    },
58    compoundVariants: [
59      {
60        animation: "spin",
61        gradient: "sunrise",
62        className: "duration-4s ease-linear", // Customizes the animation duration and easing for a specific variant
63      },
64    ],
65    defaultVariants: {
66      animation: "spin",
67      gradient: "forest",
68    },
69  }
70)
71 
72const buttonVariants = cva(
73  "relative px-6 py-2    transition-all duration-150 ease-in-out disabled:pointer-events-none disabled:opacity-50 text-sm  overflow-hidden",
74  {
75    variants: {
76      size: {
77        sm: "text-xs px-4 py-1",
78// … truncated