1.204 aplausos

HTML + CSSMikrointeraktionen

Applaus Knopf mit Zähler

Jeder Druck fügt Applaus mit Blase und Funken hinzu; gedrückt halten applaudiert in Serie bis fünfzig.

Einstellungen

16px
1x

Code

<div class="uv-mcl"><button type="button" class="b" aria-label="Applaudieren"><span class="ic"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M18 11V6a2 2 0 0 0-4 0M14 10V4a2 2 0 0 0-4 0v2M10 10.5V6a2 2 0 0 0-4 0v8M18 8a2 2 0 1 1 4 0v6a8 8 0 0 1-8 8h-2c-2.8 0-4.5-.86-6-2.34l-3.6-3.6a2 2 0 0 1 2.83-2.82L7 15"/><path class="sp" d="M3.5 7.5 2 6M5.5 4.5 5 2.5M8.5 3.2 9.5 1.5"/></svg></span><span class="pt" aria-hidden="true"><i style="--a:0deg"></i><i style="--a:45deg"></i><i style="--a:90deg"></i><i style="--a:135deg"></i><i style="--a:180deg"></i><i style="--a:225deg"></i><i style="--a:270deg"></i><i style="--a:315deg"></i></span><span class="bub" aria-hidden="true">+1</span></button><p class="ct" aria-live="polite"><b>1.204</b> Applaus</p></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: Mikrointeraktionen

Wofür du ihn nutzen kannst

Eine verspielte Art für Leser, Anerkennung zu zeigen, inspiriert von Blogplattformen. Jeder Druck lässt die Hand zucken, schickt einen Funkenkranz nach außen und lässt eine Blase mit deinem persönlichen Zähler aufsteigen, während die Summe darunter wächst. Gedrückt halten applaudiert schnell bis zum Limit von fünfzig, danach wackelt der Knopf kurz.

Der Zähler wird in der Seitensprache formatiert, per Tastatur geht Enter oder Leertaste mehrfach, und die Summe steht in einer höflichen Live Region. Schick den Applaus gebündelt an dein Backend statt bei jedem einzelnen Klick.