Interactive Hover Button

A button that animates on hover, showing a transition effect with text and an arrow. Use for interactive calls to action.

byMagic UI

Installation

terminal

pnpm dlx layro-cli add @magicuidesign/interactive-hover-button

npx layro-cli add @magicuidesign/interactive-hover-button

npx layro-cli add @magicuidesign/interactive-hover-button

bunx layro-cli add @magicuidesign/interactive-hover-button

New project? Start with init. Writes third-party code and installs packages with scripts off.

Code

Demo

import { ArrowRight } from "lucide-react"

import { cn } from "@/lib/utils"

export function InteractiveHoverButton({
  children,
  className,
  ...props
}: React.ButtonHTMLAttributes<HTMLButtonElement>) {
  return (
    <button
      className={cn(
        "group bg-background relative w-auto cursor-pointer overflow-hidden rounded-full border p-2 px-6 text-center font-semibold",
        className