Tipo de archivo*.pdf *.mp3

HTML + CSSFiltros

Teclas mecánicas con enclavamiento

Teclas de teclado mecánico que se quedan hundidas con su LED encendido, mientras una pantallita muestra el filtro.

Ajustes

16px
1x

Código

<div class="uvq05-kb"><p class="ol" aria-live="polite"><span class="pr">Tipo de archivo</span><span class="tx">*.pdf *.mp3</span></p><div class="pl"><button type="button" aria-pressed="true"><span class="cap"><span class="lg">PDF</span><i class="led" aria-hidden="true"></i></span></button><button type="button" aria-pressed="false"><span class="cap"><span class="lg">JPG</span><i class="led" aria-hidden="true"></i></span></button><button type="button" aria-pressed="true"><span class="cap"><span class="lg">MP3</span><i class="led" aria-hidden="true"></i></span></button><button type="button" aria-pressed="false"><span class="cap"><span class="lg">ZIP</span><i class="led" aria-hidden="true"></i></span></button><button type="button" aria-pressed="false"><span class="cap"><span class="lg">DOC</span><i class="led" aria-hidden="true"></i></span></button><button type="button" class="cl"><span class="cap"><span class="lg">Borrar</span></span></button></div></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 Filtros

Ver todos: Filtros

Dónde usarlo

Los aparatos antiguos usaban teclas con enclavamiento que se quedaban abajo mientras estaban activas, y este filtro por tipo de archivo recupera esa sensación con teclas de verdad. Cada una es un botón con capuchón esculpido, falda profunda, recorrido corto al pulsar y un LED verde cuando queda fija. La tecla naranja las suelta todas y una pantalla OLED muestra el patrón.

El primer color enciende los LED y el texto de la pantalla, y el segundo pinta la tecla de borrar. Cambia las leyendas por etiquetas, tallas o cualquier código corto y no pases de seis teclas por fila para que se lean bien.