¿Te ha sido útil este artículo?

HTML + CSSMikrointeraktionen

War das hilfreich mit Daumen

Der gewählte Daumen hüpft, der andere schrumpft weg; Ja bringt Konfetti, Nein klappt ein Feld für Verbesserungsvorschläge auf.

Einstellungen

16px
1x

Code

<div class="uvq15-thm"><p class="q">War dieser Artikel hilfreich?</p><div class="ch"><button type="button" class="y" aria-pressed="false"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M7 10v11H4a1 1 0 0 1-1-1v-9a1 1 0 0 1 1-1zM7 10l4-7a2.5 2.5 0 0 1 3 2.5V9h5.5a2 2 0 0 1 2 2.3l-1.2 7.5a2.5 2.5 0 0 1-2.5 2.2H7"/></svg><span>Ja</span><span class="cf" aria-hidden="true"><i style="--a:0deg"></i><i style="--a:51deg"></i><i style="--a:102deg"></i><i style="--a:153deg"></i><i style="--a:204deg"></i><i style="--a:255deg"></i><i style="--a:306deg"></i></span></button><button type="button" class="n" aria-pressed="false"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M17 14V3h3a1 1 0 0 1 1 1v9a1 1 0 0 1-1 1zM17 14l-4 7a2.5 2.5 0 0 1-3-2.5V15H4.5a2 2 0 0 1-2-2.3l1.2-7.5A2.5 2.5 0 0 1 6.2 3H17"/></svg><span>Nein</span></button></div><div class="mo"><form class="fm"><textarea rows="2" placeholder="Was können wir verbessern?" aria-label="Was können wir verbessern?"></textarea><button type="submit" class="sd">Senden</button></form></div><p class="ty" aria-live="polite"></p><button type="button" class="rs" hidden>Antwort ändern</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.

Markdown-Version mit dem ganzen Code, für KI-Assistenten

Mehr aus Mikrointeraktionen

Alle ansehen: Mikrointeraktionen

Wofür du ihn nutzen kannst

Hilfecenter und Dokumentationen schließen Artikel mit einer kurzen Ja-oder-Nein-Frage ab, und dieser Block sorgt dafür, dass die Antwort spürbar ankommt. Bei Ja federt der Daumen, ein wenig Konfetti fliegt und es gibt ein Dankeschön; bei Nein kippt der Daumen nach unten und ein Textfeld klappt auf, um zu erklären, was gefehlt hat. Der ungenutzte Button zieht sich weich zurück.

Die Hauptfarbe markiert eine positive Antwort, die Zweitfarbe die negative samt Formular. Die Frage ist der editierbare Text. Schicke Auswahl und Kommentar im Submit-Handler an deine Analyse, und lass Antwort ändern für alle, die sich verklickt haben.