Hover Glow Button 2

Glow effect button on hover

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));
}

Hover Glow Button 2 Component

"use client";
import { cn } from "@/lib/utils";

interface HoverGlowButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
  children?: string;
  onClick?: () => void;
}

const HoverGlowButton2: React.FC<HoverGlowButtonProps> = ({ children = "Hover Me!", className, onClick }) => {
  return (
    <div>
      <button
        className={cn(
          "glow-on-hover relative z-0 h-[50px] w-[220px] cursor-pointer rounded-[10px] border-none bg-black text-white outline-none",
          className
        )}
        onClick={onClick}
      >
        {children}
      </button>
      <style jsx>{`
        .glow-on-hover:before {
          content: "";
          background: linear-gradient(45deg, #ff0000, #ff7300, #fffb00, #48ff00, #00ffd5, #002bff, #7a00ff, #ff00c8, #ff0000);
          position: absolute;
          top: -2px;
          left: -2px;
          background-size: 400%;
          z-index: -1;
          filter: blur(5px);
          width: calc(100% + 4px);
          height: calc(100% + 4px);
          animation: glowing 20s linear infinite;
          opacity: 0;
          transition: opacity 0.3s ease-in-out;
          border-radius: 10px;
        }

        .glow-on-hover:active {
          color: #000;
        }

        .glow-on-hover:active:after {
          background: transparent;
        }

        .glow-on-hover:hover:before {
          opacity: 1;
        }

        .glow-on-hover:after {
          z-index: -1;
          content: "";
          position: absolute;
          width: 100%;
          height: 100%;
          background: #111;
          left: 0;
          top: 0;
          border-radius: 10px;
        }

        @keyframes glowing {
          0% {
            background-position: 0 0;
          }
          50% {
            background-position: 400% 0;
          }
          100% {
            background-position: 0 0;
          }
        }
      `}</style>
    </div>
  );
};

export default HoverGlowButton2;