Toca lo subrayado
Hacemos webs (cargan en menos de un segundo, incluso con poca cobertura), (se usan con teclado, con lector de pantalla o con una sola mano) y (tu equipo edita los textos sin llamarnos).
Frase que se despliega al tocarla
Un párrafo corto en el que cada palabra subrayada se abre y añade su explicación dentro de la propia frase, sin ventanas.
Ajustes
Código
<div class="uvq14-str"><p class="kc">Toca lo subrayado</p><p class="tx">Hacemos webs <button type="button" aria-expanded="false" aria-controls="uvq14-str-1">rápidas</button><span class="ex" id="uvq14-str-1" hidden> (cargan en menos de un segundo, incluso con poca cobertura)</span>, <button type="button" aria-expanded="false" aria-controls="uvq14-str-2">accesibles</button><span class="ex" id="uvq14-str-2" hidden> (se usan con teclado, con lector de pantalla o con una sola mano)</span> y <button type="button" aria-expanded="false" aria-controls="uvq14-str-3">fáciles de cambiar</button><span class="ex" id="uvq14-str-3" hidden> (tu equipo edita los textos sin llamarnos)</span>.</p><button type="button" class="all" aria-pressed="false">Leer completo</button></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 Texto y scroll
Ver todos: Texto y scrollDónde usarlo
El texto desplegable es una vieja idea del hipertexto: en lugar de mandar a la gente a otra página, la frase crece en su sitio cuando alguien pide más. Aquí cada palabra subrayada es un botón que muestra un inciso oculto con una breve animación que lo desenrolla y un destello de rotulador. Encaja en párrafos de presentación, explicaciones de precios y textos de bienvenida que deben ser breves.
Cambia las primeras palabras en el campo de texto y edita los incisos en el HTML. El color principal marca los botones y el secundario tiñe el destello. El botón de leer completo abre todos los incisos a la vez y los vuelve a cerrar.