- Seguidores
- 2.481
- Publicaciones
- 312
Folgen-Button mit wechselnder Breite
Folgen wird zu Gefolgt, während sich das Plus in einen Haken dreht; beim erneuten Überfahren bietet er rot das Entfolgen an.
Einstellungen
Code
<div class="uvq15-flw"><span class="av" aria-hidden="true">MR</span><b class="nm">Martina Ríos</b><small class="rl">Illustratorin in Bilbao</small><dl><div><dt>Follower</dt><dd class="n">2.481</dd></div><div><dt>Beiträge</dt><dd>312</dd></div></dl><button type="button" class="bt" aria-pressed="false"><span class="ic" aria-hidden="true"><i></i><i></i></span><span class="tx"><span class="vis">Folgen</span><span>Gefolgt</span><span>Nicht mehr folgen</span></span></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 Mikrointeraktionen
Alle ansehen: MikrointeraktionenWofür du ihn nutzen kannst
Folgen-Buttons wechseln oft ihren Zustand, und ihre Beschriftungen sind sehr unterschiedlich lang, deshalb animiert dieser seine eigene Breite, statt zu springen. Das Plus dreht sich zum Haken, die Beschriftung wechselt zu Gefolgt, die Followerzahl rollt um eins weiter und der Avatar bekommt einen kleinen Ring. Später färbt sich der Button beim Überfahren rot mit Nicht mehr folgen.
Die Hauptfarbe ist der gefüllte Button, die Zweitfarbe das Warnrot zum Entfolgen. Dieser Zustand erscheint erst, nachdem der Zeiger einmal den Button verlassen hat, er blitzt also nie direkt nach dem Klick auf. Auf Touchscreens bleibt die Beschriftung bei Gefolgt.