React + MotionBotones

Botón con borde de luz

Un reflejo fino de luz recorre el borde del botón, despacio y sin detenerse.

Ajustes

3s

Código

import { motion } from "framer-motion";

interface RotatingLightBorderProps {
  text?: string;
  color?: string;
  /** Segundos por vuelta del reflejo. */
  speed?: number;
}

export default function RotatingLightBorder({
  text = "Explorar",
  color = "#2997ff",
  speed = 3,
}: RotatingLightBorderProps) {
  return (
    <div className="relative overflow-hidden rounded-full p-[1px]">
      <motion.span
        className="absolute inset-[-150%]"
        style={{ background: `conic-gradient(transparent 0 75%, ${color})` }}
        animate={{ rotate: 360 }}
        transition={{ duration: speed, repeat: Infinity, ease: "linear" }}
      />
      <button
        type="button"
        className="relative rounded-full bg-white dark:bg-[#1c1c1e] px-6 py-3 text-sm font-medium text-[#1d1d1f] dark:text-[#f5f5f7]"
      >
        {text}
      </button>
    </div>
  );
}

Prompt para IA

Pégalo en ChatGPT, Claude o Cursor y adaptará el bloque a tu proyecto con estos ajustes, aunque no uses React.

Más en Botones

Dónde usarlo

Es el primo discreto del borde degradado: una sola línea de luz en vez de grandes manchas de color. Encaja con un aire exclusivo, como el «Ver colección» de una joyería o el «Ver la película» del reel de una productora. Al lado de efectos más ruidosos, este borde de luz giratorio transmite seguridad sin presumir.

Con unos tres segundos por vuelta queda elegante; más rápido empieza a parecer un indicador de carga. Funciona mejor con un color vivo sobre una página oscura, porque sobre blanco esa línea tan fina casi desaparece.