Glow Button

Button with color gradient

Installation

Install Dependencies

npm i clsx tailwind-merge framer-motion

Create @/utils/cn.ts file

import clsx, { ClassValue } from "clsx";
import { twMerge } from "tailwind-merge";

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs));
}

Glow Button Component

interface GlowButtonProps {
  className?: string;
  children: string;
  onClick?: () => void; // Add the onClick prop
}

export default function GlowButton({ className, children, onClick }: GlowButtonProps) {
  return (
    <div className="group relative inline-flex">
      <div className="absolute -inset-px rounded-full bg-gradient-to-r from-[#44BCFF] via-[#FF44EC] to-[#FF675E] opacity-70 blur-lg filter transition-all duration-1000 group-hover:-inset-1 group-hover:opacity-100 group-hover:duration-200"></div>
      <a
        role="button"
        className={`relative inline-flex items-center justify-center rounded-full bg-gradient-to-r from-[#5BD9C2] to-[#AFD985] px-5 py-2 text-sm font-semibold transition-all duration-200 hover:bg-gray-600 ${className}`}
        onClick={onClick} // Pass the onClick prop to the <a> element
      >
        {children}
      </a>
    </div>
  );
}