Guardar con disquete
Escribe y aparece el aviso de cambios; al guardar con el disquete o con Ctrl+S, la tapa metálica corre y parpadea el piloto.
Ajustes
Código
<div class="uvq15-fdd"><header><span class="fn">notas-reunion.txt</span><span class="ss"><i></i><b class="st">Guardado</b></span></header><textarea rows="3" aria-label="Notas" spellcheck="false">Revisar el presupuesto con Laura y enviar los planos antes del jueves.</textarea><footer><button type="button" class="dk"><span class="sh" aria-hidden="true"></span><span class="lb">Guardar</span></button><div class="dr"><span class="led" aria-hidden="true"></span><span class="hk"><kbd>Ctrl</kbd> + <kbd>S</kbd></span><time class="tm">12:00</time></div></footer><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.
Más en Microinteracciones
Ver todos: MicrointeraccionesDónde usarlo
Guardar es de las acciones que más se repiten en cualquier editor, y este bloque la convierte en un guiño nostálgico. El botón es un disquete de 3,5 pulgadas dibujado en CSS: al guardar, la tapa metálica se desliza, el disco baja como si entrara en la disquetera y un piloto verde parpadea. Encaja en apps de notas, paneles de ajustes y editores.
Al escribir, un punto ámbar marca el archivo como no guardado, y Ctrl+S o Cmd+S guarda desde cualquier punto del bloque. Cambia el color principal para el plástico del disco y el secundario para el piloto, y deja la hora para que se sepa cuándo se guardó.