Cartón de botones de mercería
Botones de madera, nácar, latón y asta en un cartón de mercería: al elegir uno, el hilo lo cose en cruz.
Ajustes
Código
<fieldset class="uvq04-btc"><legend>Botón para la camisa</legend><div class="cd"><p class="hd" aria-hidden="true">Mercería · 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">Madera</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">Nácar</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">Latón</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">Asta</span></label></div></div></fieldset>Prompt para IA
Pégalo en ChatGPT, Claude o Cursor y adaptará el bloque a tu proyecto con estos ajustes, aunque no uses React.
Más en Radio buttons
Ver todos: Radio buttonsDónde usarlo
Cuatro botones de costura sobre un cartón de mercería color crema con borde discontinuo, todos dibujados en CSS: madera con veta, nácar irisado, latón pulido y asta oscura. Al elegir uno se levanta y se inclina, y un hilo rojo lo cose en cruz por sus agujeros con trazos SVG. Encaja en configuradores de ropa, sastrerías y tiendas de manualidades.
El color principal es el hilo y el secundario el cartón. Los dos o cuatro agujeros salen de pequeños grupos SVG, así que puedes añadir un quinto botón o cambiar los materiales sin perder la animación del cosido.