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.