Neon Button

Installation

Copy and paste the following code into your project.

components/ui/neon-button.tsx

import React from "react";
import { cn } from "@/lib/utils";
 
interface NeonButtonProps
  extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
  children: React.ReactNode;
  className?: string;
  textColor?: string;
  borderStartColor?: string;
  borderEndColor?: string;
  backgroundColor?: string;
}
 
export function NeonButton({
  children,
  className,
  textColor = "#1670f0",
  borderStartColor = "#0c002b",
  borderEndColor = "#1779ff",
  backgroundColor = "transparent",
  style,
  ...props
}: NeonButtonProps) {
  const buttonStyle = {
    "--border-start": borderStartColor,
    "--border-end": borderEndColor,
    "--text-color": textColor,
    "--bg-color": backgroundColor,
    ...style,
  } as React.CSSProperties;
 
  return (
    <a
      className={cn(
        "relative overflow-hidden px-[60px] py-[30px] text-[30px] uppercase tracking-[5px] no-underline shadow-[0_20px_50px_rgba(0,0,0,0.5)]",
        "bg-[var(--bg-color)] text-[var(--text-color)]",
        className,
      )}
      style={buttonStyle}
      {...props}
    >
      <span className="absolute left-0 top-0 h-[2px] w-full animate-[neonSlideRight_2s_linear_infinite_1s] bg-linear-to-r from-[var(--border-start)] to-[var(--border-end)]" />
      <span className="absolute right-0 top-0 h-full w-[2px] animate-[neonSlideDown_2s_linear_infinite_2s] bg-linear-to-b from-[var(--border-start)] to-[var(--border-end)]" />
      <span className="absolute bottom-0 left-0 h-[2px] w-full animate-[neonSlideLeft_2s_linear_infinite_1s] bg-linear-to-l from-[var(--border-start)] to-[var(--border-end)]" />
      <span className="absolute left-0 top-0 h-full w-[2px] animate-[neonSlideUp_2s_linear_infinite_2s] bg-linear-to-t from-[var(--border-start)] to-[var(--border-end)]" />
      {children}
    </a>
  );
}

Update your globals.css

Add the following animations to your globals.css:

@theme {
  --animate-neon-slide-right: neonSlideRight 2s linear infinite;
  --animate-neon-slide-down: neonSlideDown 2s linear infinite;
  --animate-neon-slide-left: neonSlideLeft 2s linear infinite;
  --animate-neon-slide-up: neonSlideUp 2s linear infinite;
 
  @keyframes neonSlideRight {
    0% {
      transform: translateX(-100%);
    }
    100% {
      transform: translateX(100%);
    }
  }
  @keyframes neonSlideDown {
    0% {
      transform: translateY(-100%);
    }
    100% {
      transform: translateY(100%);
    }
  }
  @keyframes neonSlideLeft {
    0% {
      transform: translateX(100%);
    }
    100% {
      transform: translateX(-100%);
    }
  }
  @keyframes neonSlideUp {
    0% {
      transform: translateY(100%);
    }
    100% {
      transform: translateY(-100%);
    }
  }
}

Update the import paths to match your project setup.

import { NeonButton } from "@/components/ui/neon-button";

Usage

import { NeonButton } from "@/components/ui/neon-button";
 
export default function ButtonDemo() {
  return (
    <NeonButton
      backgroundColor="#0c002b"
      textColor="#1670f0"
      borderStartColor="rgba(22, 112, 240, 0.1)"
      borderEndColor="rgba(22, 112, 240, 0.7)"
    >
      Neon Button
    </NeonButton>
  );
}

Props

Prop	Type	Default	Description
`children`	React.ReactNode	-	The content of the button.
`backgroundColor`	string	"transparent"	The background color of the button.
`textColor`	string	"#1670f0"	The text color of the button.
`borderStartColor`	string	"#0c002b"	The start color of the neon border gradient.
`borderEndColor`	string	"#1670f0"	The end color of the neon border gradient.

Examples

Default Style

<NeonButton>Default Button</NeonButton>

Custom Colors

<NeonButton
  backgroundColor="#1a0b2e"
  textColor="#ff00ff"
  borderStartColor="rgba(255, 0, 255, 0.1)"
  borderEndColor="rgba(0, 255, 255, 0.7)"
>
  Custom Colors
</NeonButton>

With Background

<NeonButton
  backgroundColor="rgba(22, 112, 240, 0.1)"
  textColor="#1670f0"
  borderStartColor="#0c002b"
  borderEndColor="#1779ff"
>
  With Background
</NeonButton>