Glitch-Button mit Farbversatz
Beim Hover springen zwei farbige Kopien des Textes in Streifen seitlich hin und her, wie ein kaputter Bildschirm.
Einstellungen
Code
<button class="uv-glitch" data-t="GLITCH">GLITCH</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
Wofür du ihn nutzen kannst
Ein Glitch-Button gehört auf Seiten mit digitaler, etwas rebellischer Haltung: der „ENTER“-Screen eines Cyberpunk-Spiels, das Line-up eines Festivals für elektronische Musik oder ein Streetwear-Drop um Mitternacht. Im Ruhezustand ist er ein schlichter, gefüllter Button. Beim Hover zerfällt der Text in farbige Streifen, die zucken, solange der Cursor bleibt.
Kurze Wörter in Großbuchstaben bleiben lesbar, lange Beschriftungen werden zu Rauschen. In Formularen oder im Checkout hat er nichts verloren, dort brauchen die Leute Ruhe. Zwei kräftige Kontrastfarben ergeben den typischen RGB-Versatz.