HTML + CSSBotones

Copiar comando de terminal

Un comando de terminal con cursor parpadeante: al pulsar se selecciona carácter a carácter, se copia y lo confirma.

Ajustes

16px
1x

Código

<div class="uvq01-cli"><button class="b" type="button"><span class="ps" aria-hidden="true">$</span><code class="cm">npx aimran add hero</code><span class="cr" aria-hidden="true"></span><span class="ic" aria-hidden="true"><svg class="cp" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="8" y="8" width="12" height="12" rx="2.5"/><path d="M16 8V6a2 2 0 0 0-2-2H6a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h2"/></svg><span class="ck"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg></span></span><span class="sr">Copiar</span></button><span class="ok" role="status"></span><span class="msg" hidden>Copiado</span></div>

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

Los comandos de instalación suelen ser lo primero que se copia de una web para desarrolladores, y este botón deja claro ese momento. El comando va en una píldora oscura con un prompt ámbar y un cursor de bloque que parpadea. Al hacer clic el texto se resalta a saltos como una selección a mano, se copia, el icono cambia a un check y aparece una etiqueta de Copiado.

Cambia la etiqueta por tu propio comando: se copia tal cual. El color principal define el prompt, el cursor y la confirmación, y el secundario el fondo, así que un tema claro o el verde de tu marca son un cambio rápido.