React + MotionButtons

Button mit Lichtkante

Ein feiner Lichtstreifen läuft langsam und ohne Pause am Rand des Buttons entlang.

Einstellungen

3s

Code

import { motion } from "framer-motion";

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

export default function RotatingLightBorder({
  text = "Entdecken",
  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 für KI

Füg ihn in ChatGPT, Claude oder Cursor ein und der Baustein wird mit diesen Einstellungen an dein Projekt angepasst, auch ohne React.

Mehr aus Buttons

Wofür du ihn nutzen kannst

Das ist der zurückhaltende Verwandte des Verlaufsrahmens: eine einzelne Lichtlinie statt großer Farbflächen. Er passt zu einem edlen Auftritt, etwa beim „Kollektion ansehen“ eines Juweliers, beim „Film ansehen“ auf dem Showreel einer Produktionsfirma oder als ruhiger Call to Action im Portfolio. Neben lauteren Effekten wirkt dieser rotierende Lichtrand selbstbewusst statt aufdringlich.

Etwa drei Sekunden pro Runde wirken elegant, schneller erinnert es an einen Ladekreis. Am besten wirkt eine kräftige Farbe auf dunkler Seite, denn auf Weiß verschwindet die dünne Linie fast.