Botón pixel art 8 bits

"use client";

import type { CSSProperties, ReactNode } from "react";

/** Botón pixel art de 8 bits: esquinas escalonadas, relieve de bloques y desplazamiento al pulsar. React + TypeScript, sin dependencias. */
export type BotonPixelColor = "verde" | "rojo" | "azul" | "amarillo";

export type BotonPixelProps = {
  children?: ReactNode;
  color?: BotonPixelColor;
  type?: "button" | "submit";
  disabled?: boolean;
  onClick?: () => void;
  className?: string;
  style?: CSSProperties;
};

const COLORS: Record<BotonPixelColor, [string, string, string]> = {
  verde: ["#5bd45b", "#2f9e2f", "#fff"],
  rojo: ["#ff5a5a", "#c22b2b", "#fff"],
  azul: ["#5aa8ff", "#2663c9", "#fff"],
  amarillo: ["#ffd84a", "#d19b0f", "#2b1d00"],
};

const CSS = `
.gcpix-root { box-sizing: border-box; display: inline-block; max-width: 100%; padding: 4px 4px 8px; font: 700 14px/1 "Press Start 2P", ui-monospace, "SF Mono", Menlo, Consolas, monospace; text-transform: uppercase; letter-spacing: .08em; image-rendering: pixelated; }
.gcpix-root *, .gcpix-root *::before, .gcpix-root *::after { box-sizing: border-box; }
.gcpix-root button { font: inherit; letter-spacing: inherit; text-transform: inherit; -webkit-tap-highlight-color: transparent; }
.gcpix-root :focus-visible { outline: 4px dashed #fff; outline-offset: 6px; }
@media (prefers-reduced-motion: reduce) { .gcpix-root *, .gcpix-root *::before, .gcpix-root *::after { animation: none !important; transition-duration: .01ms !important; } }
.gcpix-btn { position: relative; display: inline-flex; align-items: center; gap: 12px; min-height: 52px; padding: 0 26px; border: 0; border-radius: 0; cursor: pointer; background: var(--gcpix-a); color: var(--gcpix-ink);
  box-shadow: 0 -4px 0 0 #14101c, 0 4px 0 0 #14101c, -4px 0 0 0 #14101c, 4px 0 0 0 #14101c, inset 4px 4px 0 0 rgba(255, 255, 255, .45), inset -4px -4px 0 0 var(--gcpix-b), 4px 8px 0 0 #14101c, 0 8px 0 0 #14101c; margin: 4px; }
.gcpix-btn:hover:not(:disabled) { filter: brightness(1.12); }
.gcpix-btn:active:not(:disabled) { transform: translateY(4px); box-shadow: 0 -4px 0 0 #14101c, 0 4px 0 0 #14101c, -4px 0 0 0 #14101c, 4px 0 0 0 #14101c, inset 4px 4px 0 0 var(--gcpix-b), inset -4px -4px 0 0 rgba(255, 255, 255, .25); }
.gcpix-btn:disabled { filter: grayscale(1); opacity: .6; cursor: not-allowed; }
.gcpix-arrow { width: 14px; height: 14px; flex-shrink: 0; shape-rendering: crispEdges; }
.gcpix-btn:hover:not(:disabled) .gcpix-arrow { animation: gcpix-blink .5s steps(2, jump-none) infinite; }
@keyframes gcpix-blink { 0% { transform: translateX(0); } 100% { transform: translateX(4px); } }`;

export function BotonPixel({ children = "Jugar", color = "verde", type = "button", disabled, onClick, className = "", style }: BotonPixelProps) {
  const [a, b, ink] = COLORS[color];
  const vars = { "--gcpix-a": a, "--gcpix-b": b, "--gcpix-ink": ink } as CSSProperties;
  return (
    <span className={`gcpix-root ${className}`} style={{ ...vars, ...style }}>
      <style>{CSS}</style>
      <button className="gcpix-btn" type={type} disabled={disabled} onClick={onClick}>
        <svg className="gcpix-arrow" viewBox="0 0 7 7" fill="currentColor" aria-hidden="true">
          <path d="M1 0h2v1h1v1h1v1h1v1H5v1H4v1H3v1H1z" />
        </svg>
        {children}
      </button>
    </span>
  );
}

npx shadcn@latest add https://www.gassierconsulting.com/r/boton-pixel

import { BotonPixel } from "./boton-pixel";

export default function Ejemplo() {
  return <BotonPixel color="verde">Contenido</BotonPixel>;
}