Kompass-Button
Die Nadel eines Messingkompasses sucht den Cursor überall auf der Seite und pendelt mit Trägheit nach, bevor sie stehen bleibt.
Einstellungen
Code
<button class="uvq01-cmp" type="button"><span class="dl" aria-hidden="true"><b>N</b><span class="nd"></span></span><span class="t">Route anzeigen</span><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12h14M13 6l6 6-6 6"/></svg></button>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
Alle ansehen: ButtonsWofür du ihn nutzen kannst
Ein Wegbeschreibungs-Button auf einer waldgrünen Pille mit feinen Höhenlinien, wie die Ecke einer Wanderkarte. Sein kleiner Messingkompass hat eine echte Nadel, die eine Federsimulation antreibt: Sie dreht sich zum Zeiger, wo auch immer er auf der Seite ist, schießt etwas über und kommt zur Ruhe. Verlässt der Zeiger das Fenster, schwingt sie nach Norden zurück, beim Tastaturfokus zeigt sie auf die Beschriftung. Ideal für Karten, Filialfinder und Reiseführer.
Die Hauptfarbe ist die Pille, die Zweitfarbe die Messingfassung, Marineblau mit Gold oder Sand mit Kupfer funktionieren ebenso. Bei reduzierter Bewegung springt die Nadel direkt ans Ziel, und der globale Listener wird beim Unmount entfernt.