Compartir en abanico
El botón de compartir abre cuatro destinos en arco con un muelle escalonado; se recorren con flechas y Escape los recoge.
Ajustes
Código
<div class="uvq15-shr"><div class="fan"><button type="button" class="it" tabindex="-1" style="--i:0;--x:-4.83em;--y:-1.29em" aria-label="Copiar enlace" data-m="Enlace copiado"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M10 14a5 5 0 0 0 7 0l3-3a5 5 0 0 0-7-7l-1 1"/><path d="M14 10a5 5 0 0 0-7 0l-3 3a5 5 0 0 0 7 7l1-1"/></svg></button><button type="button" class="it" tabindex="-1" style="--i:1;--x:-2.11em;--y:-4.53em" aria-label="Correo" data-m="Abriendo el correo…"><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></button><button type="button" class="it" tabindex="-1" style="--i:2;--x:2.11em;--y:-4.53em" aria-label="Mensaje" data-m="Abriendo mensajes…"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 12a8 8 0 0 1-11.6 7.1L4 20l1-4.6A8 8 0 1 1 21 12Z"/></svg></button><button type="button" class="it" tabindex="-1" style="--i:3;--x:4.83em;--y:-1.29em" aria-label="Código QR" data-m="Código QR listo"><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="3" width="7" height="7" rx="1"/><rect x="14" y="3" width="7" height="7" rx="1"/><rect x="3" y="14" width="7" height="7" rx="1"/><path d="M14 14h3v3h-3zM20 14v.01M14 20h.01M17 20h4v-3"/></svg></button><button type="button" class="mn" aria-expanded="false" aria-label="Compartir"><span class="o"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="18" cy="5" r="3"/><circle cx="6" cy="12" r="3"/><circle cx="18" cy="19" r="3"/><path d="m8.6 13.5 6.8 4M15.4 6.5l-6.8 4"/></svg></span><span class="x"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M6 6l12 12M18 6 6 18"/></svg></span></button></div><p class="tt" 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.
Más en Microinteracciones
Ver todos: MicrointeraccionesDónde usarlo
Los menús de compartir suelen abrir una hoja entera aunque solo haya unas pocas opciones. Este lo mantiene compacto: el botón redondo se convierte en una X y cuatro destinos se despliegan en arco por encima, uno tras otro y con un muelle que se pasa un poco. Cada uno tiene su etiqueta y, al elegir, aparece una confirmación breve debajo.
El color principal es el disparador y el secundario resalta la opción activa. Las posiciones salen de un ángulo y un radio escritos en el marcado, así que añadir un quinto destino solo pide otro botón. Copiar enlace guarda la dirección de la página en el portapapeles.