Sellos para el tipo de envío
Cada tipo de envío es un sello con borde troquelado: al elegirlo, un matasellos de tinta cae encima con sus ondas.
Ajustes
Código
<fieldset class="uvq04-pst2"><legend>Envío</legend><div class="op"><label style="--c:#2f7f73"><input type="radio" name="uvq04-pst2"><span class="sp"><span class="st"><span class="in"><em>2,90 €</em><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M3 18h13.5c2.5 0 4-1.6 4-3.6V12"/><circle cx="10" cy="12" r="5.2"/><path d="M10 12a2 2 0 1 1 2-2"/><path d="M18.5 12V7.5M20.5 12V8"/></svg></span></span><svg class="pm" viewBox="0 0 60 40" aria-hidden="true"><circle cx="20" cy="20" r="13"/><circle cx="20" cy="20" r="9.5"/><path d="M36 12q4-3 8 0t8 0t8 0M36 20q4-3 8 0t8 0t8 0M36 28q4-3 8 0t8 0t8 0"/></svg></span><span class="nm">Económico</span><small>5-7 días</small></label><label style="--c:#c98a2b"><input type="radio" name="uvq04-pst2" checked><span class="sp"><span class="st"><span class="in"><em>4,50 €</em><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M2.5 7h11v9h-11zM13.5 10h4l3 3v3h-7"/><circle cx="6.5" cy="17.5" r="1.8"/><circle cx="17" cy="17.5" r="1.8"/></svg></span></span><svg class="pm" viewBox="0 0 60 40" aria-hidden="true"><circle cx="20" cy="20" r="13"/><circle cx="20" cy="20" r="9.5"/><path d="M36 12q4-3 8 0t8 0t8 0M36 20q4-3 8 0t8 0t8 0M36 28q4-3 8 0t8 0t8 0"/></svg></span><span class="nm">Estándar</span><small>2-3 días</small></label><label style="--c:#b23a3a"><input type="radio" name="uvq04-pst2"><span class="sp"><span class="st"><span class="in"><em>7,90 €</em><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M2.5 13.5l19-7-5.5 13-4-5z"/><path d="M12 14.5l9.5-8"/></svg></span></span><svg class="pm" viewBox="0 0 60 40" aria-hidden="true"><circle cx="20" cy="20" r="13"/><circle cx="20" cy="20" r="9.5"/><path d="M36 12q4-3 8 0t8 0t8 0M36 20q4-3 8 0t8 0t8 0M36 28q4-3 8 0t8 0t8 0"/></svg></span><span class="nm">Urgente</span><small>24 h</small></label></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
Los métodos de envío aparecen como tres sellos de correos con borde troquelado de verdad, hecho con una máscara CSS, cada uno con precio, icono de línea y un color antiguo apagado. Al elegir uno se inclina un poco y cae encima un matasellos redondo con líneas onduladas, estampado con una escala que rebota. Encaja en pagos, papelerías y cualquier elección de envío con encanto.
El color principal es la tinta del matasellos y el secundario el papel del sello. Cada sello toma su propio color del atributo style, así que ajústalos a tu marca, y deja corto el nombre y el plazo de entrega debajo de cada uno.