Knopfkarte aus dem Kurzwarenladen
Knöpfe aus Holz, Perlmutt, Messing und Horn auf einer Karte: Wählst du einen, näht ihn ein Faden über Kreuz an.
Einstellungen
Code
<fieldset class="uvq04-btc"><legend>Knopf für das Hemd</legend><div class="cd"><p class="hd" aria-hidden="true">Kurzwaren · 18 mm</p><div class="gr"><label><input type="radio" name="uvq04-btc"><span class="bt wd" aria-hidden="true"><svg viewBox="0 0 24 24"><g class="ho"><circle cx="9.3" cy="9.3" r="1.5"/><circle cx="14.7" cy="9.3" r="1.5"/><circle cx="9.3" cy="14.7" r="1.5"/><circle cx="14.7" cy="14.7" r="1.5"/></g><g class="sw"><path pathLength="1" d="M9.3 9.3L14.7 14.7"/><path class="s2" pathLength="1" d="M14.7 9.3L9.3 14.7"/></g></svg></span><span class="nm">Holz</span></label><label><input type="radio" name="uvq04-btc" checked><span class="bt pl" aria-hidden="true"><svg viewBox="0 0 24 24"><g class="ho"><circle cx="9" cy="12" r="1.6"/><circle cx="15" cy="12" r="1.6"/></g><g class="sw"><path pathLength="1" d="M9 12H15"/><path class="s2" pathLength="1" d="M9 12.6H15"/></g></svg></span><span class="nm">Perlmutt</span></label><label><input type="radio" name="uvq04-btc"><span class="bt br" aria-hidden="true"><svg viewBox="0 0 24 24"><g class="ho"><circle cx="9.3" cy="9.3" r="1.5"/><circle cx="14.7" cy="9.3" r="1.5"/><circle cx="9.3" cy="14.7" r="1.5"/><circle cx="14.7" cy="14.7" r="1.5"/></g><g class="sw"><path pathLength="1" d="M9.3 9.3L14.7 14.7"/><path class="s2" pathLength="1" d="M14.7 9.3L9.3 14.7"/></g></svg></span><span class="nm">Messing</span></label><label><input type="radio" name="uvq04-btc"><span class="bt hn" aria-hidden="true"><svg viewBox="0 0 24 24"><g class="ho"><circle cx="9" cy="12" r="1.6"/><circle cx="15" cy="12" r="1.6"/></g><g class="sw"><path pathLength="1" d="M9 12H15"/><path class="s2" pathLength="1" d="M9 12.6H15"/></g></svg></span><span class="nm">Horn</span></label></div></div></fieldset>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 Radiobuttons
Alle ansehen: RadiobuttonsWofür du ihn nutzen kannst
Vier Nähknöpfe sitzen auf einer cremefarbenen Kurzwarenkarte mit gestricheltem Rand, alle in CSS gezeichnet: gemasertes Holz, schimmerndes Perlmutt, poliertes Messing und dunkles Horn. Die Wahl hebt und kippt den Knopf, und ein roter Faden näht ihn mit SVG-Strichen über Kreuz durch die Löcher. Passend für Modekonfiguratoren, Schneidereien und Bastelläden.
Die Hauptfarbe ist der Faden, die Zweitfarbe die Karte. Zwei oder vier Löcher kommen aus kleinen SVG-Gruppen, so kannst du einen fünften Knopf ergänzen oder die Materialien tauschen, ohne die Nähanimation zu verlieren.