HTML + CSSBotones

Mosquetón de escalada

El gatillo del mosquetón se abre al pasar el ratón; al pulsar, la virola sube, la cuerda da un tirón y queda asegurado.

Ajustes

16px
1x

Código

<button class="uvq01-crb" type="button" aria-label="Asegurar" aria-pressed="false"><svg viewBox="0 0 40 60" aria-hidden="true"><g class="rpg"><path class="rp" d="M-2 57C8 45 32 45 42 57"/><path class="rp2" d="M-2 57C8 45 32 45 42 57"/></g><path class="bd" d="M6 16a10 10 0 0 1 10-10h8a10 10 0 0 1 10 10v28a10 10 0 0 1-10 10h-8a10 10 0 0 1-10-10"/><g class="gt"><path d="M6 18v25"/><rect class="sl" x="3" y="33" width="6" height="9" rx="1.8"/></g></svg><span class="w" aria-hidden="true"><span class="a">Asegurar</span><span class="b">Asegurado</span></span></button>

Prompt para IA

Pégalo en ChatGPT, Claude o Cursor y adaptará el bloque a tu proyecto con estos ajustes, aunque no uses React.

Versión Markdown con todo el código, para asistentes de IA

Más en Botones

Ver todos: Botones

Dónde usarlo

Un interruptor sacado de un arnés de escalada: un mosquetón de aluminio anodizado naranja con una cuerda pasando por dentro, junto a la etiqueta. Al pasar el ratón el gatillo de muelle se abre hacia dentro y al pulsar la virola sube hasta la nariz, la cuerda da un tirón y la etiqueta cambia a asegurado. Bloqueado, el gatillo solo amaga. Encaja en rocódromos y tiendas de montaña.

El color principal es el aluminio anodizado y el secundario la cuerda, así que un mosquetón azul con cuerda roja es un cambio rápido. El estado se expone con aria-pressed y el movimiento reducido deja todos los cambios instantáneos.