Hover Border Gradient

A beautiful hover border gradient effect that animates when you hover over the component.

Installation

Copy the code

components/hover-border-gradient.tsx

"use client";
import React, { useState } from "react";
import { motion, AnimatePresence } from "framer-motion";
import { cn } from "@/lib/utils";

export const HoverBorderGradient = ({
children,
containerClassName,
className,
as: Tag = "button",
duration = 1,
clockwise = true,
...props
}: {
children: React.ReactNode;
containerClassName?: string;
className?: string;
as?: React.ElementType;
duration?: number;
clockwise?: boolean;
} & React.HTMLAttributes) => {
const [hovered, setHovered] = useState(false);

const movingBackground = (
  
    
  
);

return (
   setHovered(true)}
    onMouseLeave={() => setHovered(false)}
    className={cn(
      "relative flex h-min w-fit flex-col flex-nowrap items-center justify-center overflow-visible rounded-full border border-border/40 bg-background/50 p-px decoration-clone transition-all duration-500 hover:bg-transparent",
      containerClassName
    )}
    {...props}
  >
    
      {children}
    
    
      {hovered && movingBackground}
    
  
);
};

Props

Prop	Type	Default	Description
children*	ReactNode	-	The content inside the gradient container.
containerClassName	string	-	Custom classes for the outer container.
className	string	-	Custom classes for the inner container.
as	ElementType	`button`	The HTML element to render as.
duration	number	`1`	Animation duration.
clockwise	boolean	`true`	Direction of the gradient rotation.