Carte de boutons de mercerie
Boutons en bois, nacre, laiton et corne sur une carte de mercerie : choisis-en un et le fil le coud en croix.
Réglages
Code
<fieldset class="uvq04-btc"><legend>Bouton pour la chemise</legend><div class="cd"><p class="hd" aria-hidden="true">Mercerie · 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">Bois</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">Nacre</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">Laiton</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">Corne</span></label></div></div></fieldset>Prompt pour l’IA
Collez-le dans ChatGPT, Claude ou Cursor : le bloc sera adapté à votre projet avec ces réglages, même sans React.
Plus dans Boutons radio
Voir tout : Boutons radioOù l’utiliser
Quatre boutons de couture reposent sur une carte de mercerie crème au bord pointillé, tous dessinés en CSS : bois veiné, nacre irisée, laiton poli et corne foncée. En choisir un le soulève et l'incline, puis un fil rouge le coud en croix à travers ses trous avec des tracés SVG. Pour les configurateurs de vêtements, les tailleurs et les boutiques créatives.
La couleur principale est le fil et la secondaire la carte. Les deux ou quatre trous viennent de petits groupes SVG : ajoute un cinquième bouton ou change les matières sans perdre l'animation de couture.