Botón cromado Y2K

"use client";

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

/** Botón cromado estilo Y2K: reflejo de cielo en metal líquido y destello en forma de estrella. React + TypeScript, sin dependencias. */
export type BotonCromoProps = {
  children?: ReactNode;
  type?: "button" | "submit";
  disabled?: boolean;
  onClick?: () => void;
  className?: string;
  style?: CSSProperties;
};

const CSS = `
.gcchr-root { box-sizing: border-box; display: inline-block; max-width: 100%; font: 800 18px/1 "Arial Rounded MT Bold", "Trebuchet MS", ui-rounded, ui-sans-serif, system-ui, sans-serif; letter-spacing: .02em; }
.gcchr-root *, .gcchr-root *::before, .gcchr-root *::after { box-sizing: border-box; }
.gcchr-root button { font: inherit; letter-spacing: inherit; -webkit-tap-highlight-color: transparent; }
.gcchr-root :focus-visible { outline: 3px solid #ff3fb4; outline-offset: 4px; }
@media (prefers-reduced-motion: reduce) { .gcchr-root *, .gcchr-root *::before, .gcchr-root *::after { animation: none !important; transition-duration: .01ms !important; } }
.gcchr-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 58px; padding: 0 38px; border: 2px solid #1a2a6c; border-radius: 999px; cursor: pointer; color: #fff; text-shadow: 0 -1px 0 #0a1450, 0 1px 0 #0a1450, 1px 0 0 #0a1450, -1px 0 0 #0a1450, 0 2px 4px rgba(10, 20, 100, .6);
  background: linear-gradient(180deg, #ffffff 0%, #d6e6ff 22%, #8fb2f0 46%, #2b4aa8 50%, #5d86e6 66%, #cfe0ff 88%, #fff 100%);
  box-shadow: inset 0 2px 0 #fff, inset 0 -3px 6px rgba(20, 30, 120, .5), 0 0 0 3px #fff, 0 0 0 4px #7a8fd8, 0 10px 18px -4px rgba(20, 30, 120, .55); transition: transform .2s cubic-bezier(.34, 1.4, .64, 1), filter .2s; overflow: hidden; }
.gcchr-btn::after { content: ""; position: absolute; top: 0; bottom: 0; width: 40%; left: -60%; transform: skewX(-24deg); background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .85), transparent); transition: left .6s ease; pointer-events: none; }
.gcchr-btn:hover:not(:disabled) { transform: translateY(-2px) scale(1.04); filter: saturate(1.2); }
.gcchr-btn:hover:not(:disabled)::after { left: 130%; }
.gcchr-btn:active:not(:disabled) { transform: translateY(1px) scale(.97); }
.gcchr-btn:disabled { filter: grayscale(.8); opacity: .6; cursor: not-allowed; }
.gcchr-star { width: 20px; height: 20px; color: #fff; filter: drop-shadow(0 0 3px #2b4aa8); transition: transform .5s cubic-bezier(.34, 1.4, .64, 1); }
.gcchr-btn:hover:not(:disabled) .gcchr-star { transform: rotate(90deg) scale(1.25); }`;

export function BotonCromo({ children = "Entrar", type = "button", disabled, onClick, className = "", style }: BotonCromoProps) {
  return (
    <span className={`gcchr-root ${className}`} style={style}>
      <style>{CSS}</style>
      <button className="gcchr-btn" type={type} disabled={disabled} onClick={onClick}>
        <svg className="gcchr-star" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
          <path d="M12 0c.8 7 3.6 10.2 12 12-8.4 1.8-11.2 5-12 12-.8-7-3.6-10.2-12-12C8.4 10.2 11.2 7 12 0z" />
        </svg>
        {children}
      </button>
    </span>
  );
}

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

import { BotonCromo } from "./boton-cromo";

export default function Ejemplo() {
  return <BotonCromo type="button">Contenido</BotonCromo>;
}