pulsating-button

1"use client"
2 
3import React from "react"
4 
5import { cn } from "@/lib/utils"
6 
7interface PulsatingButtonProps
8  extends React.ButtonHTMLAttributes<HTMLButtonElement> {
9  pulseColor?: string
10  duration?: string
11}
12 
13const PulsatingButton = React.forwardRef<
14  HTMLButtonElement,
15  PulsatingButtonProps
16>(
17  (
18    {
19      className,
20      children,
21      pulseColor = "#0096ff",
22      duration = "1.5s",
23      ...props
24    },
25    ref,
26  ) => {
27    return (
28      <button
29        ref={ref}
30        className={cn(
31          "relative flex cursor-pointer items-center justify-center rounded-full bg-blue-500 px-4 py-2 text-center text-white dark:bg-blue-500 dark:text-black",
32          className,
33        )}
34        style={
35          {
36            "--pulse-color": pulseColor,
37            "--duration": duration,
38          } as React.CSSProperties
39        }
40        {...props}
41      >
42        <div className="relative z-10">{children}</div>
43        <div className="absolute left-1/2 top-1/2 size-full -translate-x-1/2 -translate-y-1/2 animate-pulse rounded-lg bg-inherit opacity-40" />
44      </button>
45    )
46  },
47)
48 
49PulsatingButton.displayName = "PulsatingButton"
50 
51export { PulsatingButton }