Botón con borde de luz cónica

"use client";

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

/** Botón oscuro con borde de luz cónica que gira y se acelera al apuntarlo. React + TypeScript, sin dependencias. Personaliza con --gcgir-*. */
export type BotonConicoProps = {
  children?: ReactNode;
  type?: "button" | "submit";
  disabled?: boolean;
  onClick?: () => void;
  className?: string;
  style?: CSSProperties;
};

const CSS = `
@property --gcgir-a { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.gcgir-root { box-sizing: border-box; display: inline-block; max-width: 100%; font: 600 15px/1 ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; }
.gcgir-root *, .gcgir-root *::before, .gcgir-root *::after { box-sizing: border-box; }
.gcgir-root button { font: inherit; -webkit-tap-highlight-color: transparent; }
.gcgir-root :focus-visible { outline: 2px solid #fff; outline-offset: 4px; }
@media (prefers-reduced-motion: reduce) { .gcgir-root *, .gcgir-root *::before, .gcgir-root *::after { animation: none !important; transition-duration: .01ms !important; } }
.gcgir-btn { position: relative; isolation: isolate; display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 30px; border: 0; border-radius: 14px; cursor: pointer; color: var(--gcgir-fg, #f2f4ff); background: var(--gcgir-bg, #0e0f1a); transition: transform .25s cubic-bezier(.16, 1, .3, 1); }
.gcgir-btn::before { content: ""; position: absolute; inset: -1.5px; z-index: -2; border-radius: 15.5px; background: conic-gradient(from var(--gcgir-a), transparent 0 55%, var(--gcgir-c1, #6f7bff) 70%, var(--gcgir-c2, #ff6fd8) 85%, #fff 100%); animation: gcgir-spin 3.2s linear infinite; }
.gcgir-btn::after { content: ""; position: absolute; inset: -10px; z-index: -3; border-radius: 24px; background: conic-gradient(from var(--gcgir-a), transparent 0 55%, var(--gcgir-c1, #6f7bff) 75%, var(--gcgir-c2, #ff6fd8) 100%); filter: blur(16px); opacity: .0; transition: opacity .3s; animation: gcgir-spin 3.2s linear infinite; }
.gcgir-btn > .gcgir-face { position: absolute; inset: 0; z-index: -1; border-radius: 14px; background: radial-gradient(120% 140% at 50% 0%, #1b1d33, var(--gcgir-bg, #0e0f1a) 70%); }
.gcgir-btn:hover:not(:disabled) { transform: translateY(-1px); }
.gcgir-btn:hover:not(:disabled)::before, .gcgir-btn:hover:not(:disabled)::after { animation-duration: 1.4s; }
.gcgir-btn:hover:not(:disabled)::after { opacity: .5; }
.gcgir-btn:active:not(:disabled) { transform: scale(.97); }
.gcgir-btn:disabled { opacity: .5; cursor: not-allowed; }
@keyframes gcgir-spin { to { --gcgir-a: 360deg; } }`;

export function BotonConico({ children = "Probar gratis", type = "button", disabled, onClick, className = "", style }: BotonConicoProps) {
  return (
    <span className={`gcgir-root ${className}`} style={style}>
      <style>{CSS}</style>
      <button className="gcgir-btn" type={type} disabled={disabled} onClick={onClick}>
        <span className="gcgir-face" aria-hidden="true" />
        {children}
      </button>
    </span>
  );
}

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

import { BotonConico } from "./boton-conico";

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