Gummistempel-Button
Beim Freigeben landet ein roter Stempel mit abgenutzter Farbe auf der Rechnung, und das Papier zuckt kurz vom Aufprall.
Einstellungen
Code
<div class="uvq01-stp"><div class="doc" aria-hidden="true"><svg class="fx" width="0" height="0"><filter id="uvq01-grit"><feTurbulence type="fractalNoise" baseFrequency="1.2" numOctaves="2" seed="7"/><feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -2.4 1.75"/><feComposite in="SourceGraphic" operator="in"/></filter></svg><span class="h"><b>Rechnung</b><span>0187</span></span><span class="ln"></span><span class="ln s"></span><span class="ln m"></span><span class="tt"><span>Betrag</span><b>1.240,00 €</b></span><span class="mk">GENEHMIGT</span></div><button class="bt" type="button" aria-pressed="false"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M9.5 3.5h5l-.8 6h-3.4z"/><path d="M5 13.5c0-2.2 1.8-4 4-4h6c2.2 0 4 1.8 4 4v1.5H5z"/><path d="M6 19h12"/></svg><span>Freigeben</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 Buttons
Alle ansehen: ButtonsWofür du ihn nutzen kannst
Freigaben sind oft nur eine Checkbox, dieser Block gibt ihnen Gewicht: Über einem dunklen Button liegt eine cremefarbene Rechnung, und ein Klick knallt einen roten Stempel aufs Papier. Ein SVG-Rauschfilter lässt die Farbe abgenutzt wirken wie bei einem echten Gummistempel, und die Karte wackelt beim Aufprall. Ein zweiter Klick hebt den Stempel wieder ab, aria-pressed meldet den Zustand.
Die Hauptfarbe ist die Stempelfarbe, die Zweitfarbe das Papier, blaue oder grüne Stempel für andere Status sind also schnell gemacht. Ersetze die Rechnungszeilen durch eigene Daten und halte das Stempelwort kurz, damit es schräg hineinpasst.