klz-cables.com/components/ui/Button.tsx

import React from 'react';
import Link from 'next/link';
import { cn } from './utils';

export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
  variant?:
    | 'primary'
    | 'secondary'
    | 'accent'
    | 'saturated'
    | 'outline'
    | 'ghost'
    | 'white'
    | 'destructive';
  size?: 'sm' | 'md' | 'lg' | 'xl';
  href?: string;
  className?: string;
  children?: React.ReactNode;
}

export function Button({
  className,
  variant = 'primary',
  size = 'md',
  href,
  ...props
}: ButtonProps) {
  const baseStyles =
    'inline-flex items-center justify-center whitespace-nowrap rounded-full font-semibold transition-all duration-500 ease-out focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none active:scale-95 hover:-translate-y-1 hover:scale-[1.02] relative overflow-hidden group/btn isolate';

  const variants = {
    primary: 'bg-primary text-white shadow-md hover:shadow-primary/30 hover:shadow-2xl',
    secondary: 'bg-secondary text-white shadow-md hover:shadow-secondary/30 hover:shadow-2xl',
    accent: 'bg-accent text-primary-dark shadow-md hover:shadow-accent/30 hover:shadow-2xl',
    saturated: 'bg-saturated text-white shadow-md hover:shadow-primary/30 hover:shadow-2xl',
    outline:
      'border-2 border-primary bg-transparent text-primary hover:text-white hover:shadow-primary/20 hover:shadow-xl',
    ghost: 'text-primary hover:shadow-lg',
    white:
      'bg-white text-primary shadow-md hover:shadow-primary/30 hover:shadow-2xl hover:text-white',
    destructive:
      'bg-destructive text-destructive-foreground shadow-md hover:shadow-destructive/30 hover:shadow-2xl',
  };

  const sizes = {
    sm: 'h-9 px-4 text-sm md:text-base',
    md: 'h-11 px-6 text-base md:text-lg',
    lg: 'h-14 px-5 md:px-8 text-base md:text-lg',
    xl: 'h-16 px-6 md:px-10 text-lg md:text-xl',
  };

  const styles = cn(baseStyles, variants[variant], sizes[size], className);

  const overlayColors = {
    primary: 'bg-primary-dark',
    secondary: 'bg-secondary-light',
    accent: 'bg-accent-dark',
    saturated: 'bg-primary',
    outline: 'bg-primary',
    ghost: 'bg-primary-light/10',
    white: 'bg-primary-light',
    destructive: 'bg-destructive/90',
  };

  const content = (
    <>
      <span
        className={cn(
          'relative z-10 flex items-center justify-center gap-2 transition-colors duration-500',
          variant === 'white' ? 'group-hover/btn:text-primary-dark' : '',
        )}
      >
        {props.children}
      </span>
      <span
        className={cn(
          'absolute inset-0 translate-y-[101%] group-hover/btn:translate-y-0 transition-transform duration-500 ease-out',
          overlayColors[variant],
        )}
      />
    </>
  );

  if (href) {
    return (
      <Link href={href} className={styles}>
        {content}
      </Link>
    );
  }

  return (
    <button className={styles} {...props}>
      {content}
    </button>
  );
}