SnippetUI
← Back to snippets

Shimmer-Button

Eine schöne Tastenkomponente, die beim Schweben und in regelmäßigen Abständen ein Lichtband (Schimmereffekt) aussendet.

HTMLCSSTailwind CSSReact

Es handelt sich um eine schöne Knopfkomponente, die mit einem Lichtband (Schimmereffekt) die Blicke auf sich zieht, das beim Schweben und in regelmäßigen Abständen fließt. Ideal für CTA (Call To Action), bei dem Sie die Aufmerksamkeit des Benutzers erregen möchten.

Vorschau

Anwendungsfälle und Funktionen

  • Conversion-Raten verbessern: Durch die visuelle Bewegung lässt sich die Aufmerksamkeit der Benutzer leicht erregen, sodass sie sich perfekt für wichtige Calls-to-Action (CTA) wie Anmelde- und Kaufschaltflächen eignet.

  • Kleine Animation: Vermittelt einen anspruchsvollen Eindruck mit einem regelmäßigen periodischen Schimmereffekt (Lichtreflexion), der nicht zu auffällig ist.

  • Mikrointeraktionen: Die Schaltfläche wird beim Schweben leicht angehoben und ein Schatten wird hinzugefügt, um hervorzuheben, dass es sich um ein anklickbares Element handelt.

Kernpunkte von Design und UX (Design & UX)

  • Kontrast und Sichtbarkeit: Der Effekt wird durch das Verlaufen heller Lichtbänder vor einem dunklen Hintergrund verstärkt.

  • Leistung: Animationen, die „Transformation“ und „Deckkraft“ nutzen, minimieren die Zeichenlast für den Browser und sorgen für reibungslose Bewegungen.

  • Barrierefreiheit: Der Fokusring („focus:ring“) wurde passend eingestellt, sodass der Status auch bei Tastaturbedienungen visuell kommuniziert werden kann.

So passen Sie es an (Anpassungsanleitung)

  • Farbe ändern: Sie können die Farbe des Lichts anpassen, indem Sie „rgba(255, 255, 255, 0.2)“ in die Farbe Ihrer Marke ändern (z. B. „rgba(59, 130, 246, 0.3)“).

  • Animationsgeschwindigkeitsanpassung: Wenn Sie „3s“ von „Animation: Schimmereffekt 3s unendlich“ auf „2s“ einstellen, wird die Bewegung schneller, und wenn Sie „5s“ einstellen, wird die Bewegung langsamer.

  • Implementierung nur mit Tailwind: Durch das Hinzufügen von „keyframes“ zu „tailwind.config.js“ ist es möglich, die Implementierung nur mit den Dienstprogrammklassen von Tailwind abzuschließen, ohne benutzerdefinierte Klassen zu verwenden.

Implementierungscode (Implementierung)

HTML & CSS (Tailwind CSS併用)

<button class="shimmer-btn text-slate-200 bg-slate-900 border border-slate-700/50 px-8 py-3 rounded-full font-medium transition-all duration-300 hover:-translate-y-1 hover:shadow-lg hover:shadow-slate-500/20 focus:outline-none focus:ring-2 focus:ring-slate-400 focus:ring-offset-2 focus:ring-offset-slate-950">

<span class="relative z-10 flex items-center gap-2">

  <svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">

    <path stroke-linecap="round" stroke-linejoin="round" d="M13 10V3L4 14h7v7l9-11h-7z" />

  </svg>

  Get Started

</span>

</button>



<style>
.shimmer-btn {

  position: relative;

  overflow: hidden;

}



.shimmer-btn::before {

  content: '';

  position: absolute;

  top: 0;

  left: -100%;

  width: 50%;

  height: 100%;

  background: linear-gradient(

    90deg,

    transparent,

    rgba(255, 255, 255, 0.2),

    transparent

  );

  transform: skewX(-20deg);

  animation: shimmer 3s infinite;

}



@keyframes shimmer {

  0% { left: -100%; }

  20% { left: 200%; }

  100% { left: 200%; }

}
</style>

Reagieren (Tailwind-Konfiguration)

Dies ist ein Ansatz, der innerhalb einer React-Komponente durch Erweitern der Tailwind-Konfigurationsdatei („tailwind.config.js“) vervollständigt werden kann.