Glow Line Button

import { GlowLineButton } from "@/components/kanso/glow-line-button"

export default function GlowLineButtonDemo() {
  return (
    <div className="flex gap-4">
      <GlowLineButton glowColor="blue">Blue Glow</GlowLineButton>
      <GlowLineButton glowColor="rose">Rose Glow</GlowLineButton>
    </div>
  )
}

import * as React from 'react';
import { Button } from '@/components/ui/button';
import { cn } from '@/lib/utils';

export interface GlowLineButtonProps extends React.ComponentPropsWithoutRef<
  typeof Button
> {
  /** The color of the bottom glow line. Can be a preset name or a custom color string (e.g. hex #ff0000) */
  glowColor?: 'white' | 'blue' | 'emerald' | 'violet' | 'rose' | string;
}

const GlowLineButton = React.forwardRef<HTMLButtonElement, GlowLineButtonProps>(
  ({ className, glowColor = 'white', children, ...props }, ref) => {
    // Check if glowColor is a custom color (hex, rgb, hsl, etc.)
    const isPreset = ['white', 'blue', 'emerald', 'violet', 'rose'].includes(
      glowColor
    );

    return (
      <Button
        ref={ref}
        variant="ghost"
        className={cn(
          'min-w-[120px] relative cursor-pointer px-[17px] py-[12px] h-auto border-0 rounded-[7px] shadow-[inset_0_0_0_1px_rgba(255,255,255,0.1)] bg-[radial-gradient(ellipse_at_bottom,_rgba(71,81,92,1)_0%,_rgba(11,21,30,1)_45%)] text-white/70 transition-all duration-1000 [transition-timing-function:cubic-bezier(0.15,0.83,0.66,1)] hover:text-white hover:scale-105 hover:-translate-y-0.5 group hover:bg-transparent',
          className
        )}
        {...props}
      >
        {children}
        {/* Glowing bottom line */}
        <span
          style={{
            background: !isPreset
              ? `linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, ${glowColor} 50%, rgba(255, 255, 255, 0) 100%)`
              : undefined,
          }}
          className={cn(
            'absolute bottom-0 left-[15%] h-[1px] w-[70%] opacity-20 transition-all duration-1000 group-hover:opacity-100 group-hover:before:opacity-100',
            glowColor === 'white' &&
              'bg-[linear-gradient(90deg,rgba(255,255,255,0)_0%,rgba(255,255,255,1)_50%,rgba(255,255,255,0)_100%)]',
            glowColor === 'blue' &&
              'bg-[linear-gradient(90deg,rgba(59,130,246,0)_0%,rgba(59,130,246,1)_50%,rgba(59,130,246,0)_100%)]',
            glowColor === 'emerald' &&
              'bg-[linear-gradient(90deg,rgba(16,185,129,0)_0%,rgba(16,185,129,1)_50%,rgba(16,185,129,0)_100%)]',
            glowColor === 'violet' &&
              'bg-[linear-gradient(90deg,rgba(139,92,246,0)_0%,rgba(139,92,246,1)_50%,rgba(139,92,246,0)_100%)]',
            glowColor === 'rose' &&
              'bg-[linear-gradient(90deg,rgba(244,63,94,0)_0%,rgba(244,63,94,1)_50%,rgba(244,63,94,0)_100%)]'
          )}
        />
      </Button>
    );
  }
);

GlowLineButton.displayName = 'GlowLineButton';

export { GlowLineButton };