Correo del trabajolucia@estudio.es

HTML + CSSMicrointeracciones

Copiar contraseña con borrado automático

Al copiar, los puntos de la contraseña hacen una ola y un anillo cuenta atrás hasta vaciar el portapapeles.

Ajustes

16px
1x

Código

<div class="uvq15-pwd"><header><span class="ic" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="5" width="18" height="14" rx="2"/><path d="m3 7 9 6 9-6"/></svg></span><div><b>Correo del trabajo</b><small>lucia@estudio.es</small></div></header><div class="fd"><span class="pw" aria-hidden="true" translate="no"><span class="ch" style="--i:0"><i>•</i><b>L</b></span><span class="ch" style="--i:1"><i>•</i><b>i</b></span><span class="ch" style="--i:2"><i>•</i><b>n</b></span><span class="ch" style="--i:3"><i>•</i><b>c</b></span><span class="ch" style="--i:4"><i>•</i><b>e</b></span><span class="ch" style="--i:5"><i>•</i><b>.</b></span><span class="ch" style="--i:6"><i>•</i><b>A</b></span><span class="ch" style="--i:7"><i>•</i><b>z</b></span><span class="ch" style="--i:8"><i>•</i><b>u</b></span><span class="ch" style="--i:9"><i>•</i><b>l</b></span><span class="ch" style="--i:10"><i>•</i><b>.</b></span><span class="ch" style="--i:11"><i>•</i><b>2</b></span><span class="ch" style="--i:12"><i>•</i><b>0</b></span><span class="ch" style="--i:13"><i>•</i><b>2</b></span><span class="ch" style="--i:14"><i>•</i><b>7</b></span></span><button type="button" class="ey" aria-pressed="false" aria-label="Mostrar contraseña"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7S2 12 2 12Z"/><circle cx="12" cy="12" r="3"/><path class="sl" d="M4 4l16 16"/></svg></button><button type="button" class="cp" aria-label="Copiar contraseña"><span class="a"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="8" y="8" width="12" height="12" rx="2"/><path d="M16 8V6a2 2 0 0 0-2-2H6a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h2"/></svg></span><span class="b"><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></button></div><p class="cd" aria-hidden="true"><span class="rg"><svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" pathLength="100"/><circle class="t" cx="12" cy="12" r="10" pathLength="100"/></svg><b class="n">15</b></span><span>Se borrará del portapapeles</span></p><p class="sr" aria-live="polite"></p></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 Microinteracciones

Ver todos: Microinteracciones

Dónde usarlo

Los gestores de contraseñas copian secretos al portapapeles y los buenos lo vacían a los pocos segundos. Esta ficha enseña ese comportamiento: al pulsar copiar, una ola recorre los puntos ocultos, el icono pasa a check y un anillo cuenta quince segundos antes de vaciar el portapapeles. El botón del ojo gira cada punto hasta mostrar su carácter.

El color principal es el botón de copiar y el icono de la cuenta, y el secundario el anillo de la cuenta atrás. Cambia la contraseña en el marcado y el script copiará justo ese texto. Encaja en gestores, páginas de ajustes y pantallas con claves de API o códigos de recuperación.