Configuración básica

Texto

Puntos:
Configura el texto que se muestra en el botón. Su función es comunicar con claridad la siguiente acción del usuario.

Qué cambia este ajuste:
Cambiar el texto impacta directamente en la tasa de clics y en la velocidad de comprensión.

Consejo de ajuste:
Como referencia, usa de 10 a 18 caracteres e incluye un verbo (por ejemplo: Ver más / Solicitar) para que la intención se entienda mejor.

Elementos de configuración

• Texto: texto visible del botón. El valor predeterminado es "BUTTON STYLE".

Si quieres mostrar un texto distinto al pasar el cursor, activa la pestaña Hover y configura el texto de Hover.

Etiqueta

Puede diferir ligeramente de la interfaz real.

Puntos:
Configura la etiqueta HTML y los atributos de salida. Aquí separas claramente si es un enlace o un botón de ejecución.

Qué cambia este ajuste:
También define información relacionada con SEO, accesibilidad y medición (GTM).

Consejo de ajuste:
Si el objetivo es navegar de página, usa a; si es enviar formulario o ejecutar JS, usa button.

Elementos de configuración

• Etiqueta HTML: Enlace (etiqueta <a>) / Botón (etiqueta <button>). El valor predeterminado es Enlace.

A nivel semántico, usa Enlace para navegación o salto de URL, y Botón para ejecutar procesos con JavaScript o manipular formularios. Como los rastreadores SEO siguen los enlaces en <a>, se recomienda Enlace para navegación interna del sitio.

Al seleccionar Enlace

Puede diferir ligeramente de la interfaz real.

Puede diferir ligeramente de la interfaz real.

• Enlace URL: define la URL de destino. Registra la página objetivo con una URL canónica.
• Enlace Target: elige misma pestaña (_self) o nueva pestaña (_blank). Para enlaces externos se recomienda nueva pestaña.
• rel Attribute: añade atributos como noopener, noreferrer y nofollow según requisitos de seguridad y SEO.

Si configuras target="_blank", se añadirá rel="noopener" automáticamente (forzado internamente por seguridad). No se puede quitar manualmente. Si no quieres transferir señales SEO a sitios externos, añade nofollow.

• Enlace Title: añade una descripción complementaria del enlace para reforzar accesibilidad y semántica.

Al seleccionar Botón

Puede diferir ligeramente de la interfaz real.

• Botón Type: selecciona button / submit / reset para definir el comportamiento dentro del formulario.

submit envía el formulario. Para uso fuera de formularios, selecciona button. Como reset restablece todas las entradas del formulario, úsalo con cuidado para evitar errores operativos. El valor predeterminado es button (no envía el formulario).

Restricción de accesibilidad:
si Enlace URL está vacío o es #, se añade automáticamente role="button" en la salida HTML. Así, un botón sin función de enlace se lee correctamente como "botón" en lectores de pantalla.

Fallback del texto de Hover:
si no se configura texto de Hover en la pestaña Hover, se reutiliza el texto del estado normal.

Elementos comunes

Puede diferir ligeramente de la interfaz real.

• aria-label: etiqueta para lectura en pantalla. Úsala cuando el texto visible no transmita bien la intención.
• Tracking ID: identificador de medición. Se usa para agregar eventos en GTM y herramientas analíticas.
• Botón Location: etiqueta de ubicación para gestionar posición. Facilita distinguir CTA en pruebas A/B.
• ID: identificador único. Se usa para referenciar el elemento de forma unívoca desde CSS o JS.

Tracking ID y Botón Location se emiten como atributos data-* en HTML y pueden usarse desde gestores de etiquetas como GTM. ID debe ser único dentro de la página. Si varios bloques comparten el mismo ID, CSS o JS pueden no funcionar como esperas.