DocsComponents
Star us
Docs

Interactive Hover Button

A visually engaging button component that responds to hover with dynamic transitions, adapting smoothly between light and dark modes for enhanced user interactivity.

Installation

Install dependencies

npm install framer-motion lucide-react

Run the following command

It will create a new file interactive-hover-button.tsx inside the components/mage-ui/button directory.

mkdir -p components/mage-ui/button && touch components/mage-ui/button/interactive-hover-button.tsx

Paste the code

Open the newly created file and paste the following code:

import React from "react";
import { ArrowRight } from "lucide-react";
import { cn } from "@/lib/utils";
 
interface InteractiveHoverButtonProps
  extends React.ButtonHTMLAttributes<HTMLButtonElement> {}
 
export const InteractiveHoverButton = React.forwardRef<
  HTMLButtonElement,
  InteractiveHoverButtonProps
>(({ children, className, ...props }, ref) => {
  return (
    <button
      ref={ref}
      className={cn(
        "group relative w-auto cursor-pointer overflow-hidden rounded-full border bg-background p-2 px-6 text-center font-semibold",
        className,
      )}
      {...props}
    >
      <div className="flex items-center gap-2">
        <div className="h-2 w-2 rounded-full bg-primary transition-all duration-300 group-hover:scale-[100.8]"></div>
        <span className="inline-block transition-all duration-300 group-hover:translate-x-12 group-hover:opacity-0">
          {children}
        </span>
      </div>
      <div className="absolute top-0 z-10 flex h-full w-full translate-x-12 items-center justify-center gap-2 text-primary-foreground opacity-0 transition-all duration-300 group-hover:-translate-x-5 group-hover:opacity-100">
        <span>{children}</span>
        <ArrowRight />
      </div>
    </button>
  );
});
 
InteractiveHoverButton.displayName = "InteractiveHoverButton";
 
 
export function InteractiveHoverButtonDemo() {
  return <InteractiveHoverButton>Hover Me</InteractiveHoverButton>;
}
Hover Border GradientMoving Border