neon-button.tsx

Button.tsx

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

type ButtonProps = {
  containerClassName?: string;
} & React.ComponentProps<"button">;

function Button({
  className,
  containerClassName,
  children,
  ...props
}: ButtonProps) {
  const mainClass = `btn relative text-white font-thin`;

  return (
    <button className={cn(mainClass, className)} {...props}>
      <BtnBg />
      <div
        data-slot="btn-container"
        className={cn(`relative`, containerClassName)}
      >
        {children}
      </div>
    </button>
  );
}

function BtnBg() {
  return (
    <div className="hue-rotate-0 absolute top-0 left-0 h-full w-full">
      <div className="btn-bg-bevel"></div>
      <div className="btn-bg-border"></div>
      <div className="btn-bg-border-sides"></div>
      <div className="btn-bg-border-bevel"></div>
    </div>
  );
}

export { Button };

index.css

.btn-bg-bevel,
.btn-bg-border,
.btn-bg-border-sides,
.btn-bg-border-bevel {
  @apply absolute z-0;
}

.btn-bg-bevel {
  @apply top-0.75 left-0.75 w-[calc(100%-6px)] h-[calc(100%-6px)];

  background: url("./btn/bg.webp") center repeat;
}

.btn-bg-border {
  @apply mix-blend-lighten top-0 left-0.75 w-[calc(100%-6px)] h-full;

  background:
    url("./btn/border-top.webp") top center repeat-x,
    url("./btn/border-bottom.webp") bottom center repeat-x;
}

.btn-bg-border-sides {
  @apply mix-blend-lighten top-0.75 left-0 w-full h-[calc(100%-6px)];

  background:
    url("./btn/border-left.webp") left center repeat-y,
    url("./btn/border-right.webp") right center repeat-y;
}

.btn-bg-border-bevel {
  @apply top-0 left-0 w-full h-full;

  background:
    url("./btn/bevel-top-left.webp") top left no-repeat,
    url("./btn/bevel-top-right.webp") top right no-repeat,
    url("./btn/bevel-bottom-left.webp") bottom left no-repeat,
    url("./btn/bevel-bottom-right.webp") bottom right no-repeat;
}