Como saber si el problema es del boton o del enlace

Antes de tocar codigo, conviene separar “no hace clic” de “si hace clic pero no llega”. Un boton puede fallar por capas invisibles, por el area clickeable, por tracking, por URLs mal formadas, o porque el cliente de correo esta bloqueando algo.

• No hace clic: el cursor no cambia, no abre nada, o el toque en movil no responde.
• Hace clic pero no llega: abre un navegador con error, pagina en blanco, o redireccion infinita.
• Solo falla en algunos: funciona en web, pero no en app; funciona en Gmail, pero no en Outlook.

Con eso en mente, vamos a las causas mas comunes.

1) El “boton” no es un enlace real

En email, el boton mas confiable es un <a> con estilos (o una tabla con un <a> adentro). Si tu boton es un <button>, un <div> con JavaScript, o depende de eventos como onclick, muchos clientes lo van a ignorar.

Fix: usa un enlace real con URL completa (https) y estilo tipo “bulletproof button”. Evita JavaScript, evita onclick, evita que el clic dependa de scripts externos.

2) URL incompleta, rara o mal codificada

Un error clasico: poner www.tusitio.com sin https://, o usar un enlace relativo como /promo. En web eso funciona, pero en email suele romperse. Tambien pasa con URLs que traen caracteres sin codificar, espacios, comillas, o parametros que se cortan.

• Siempre usa https:// al inicio.
• Evita espacios y simbolos raros en parametros.
• Si usas UTM, revisa que no se rompa por ampersands.

Fix: prueba el enlace exacto que va en el HTML. Copialo desde el correo recibido (no desde tu editor) y pegalo en un navegador. Si ahi falla, el problema es la URL, no el boton.

3) Un elemento invisible esta “encima” del boton (overlays)

Esta es de las mas desesperantes: tu boton esta bien, pero un bloque transparente lo esta tapando. Puede ser un spacer, una imagen, un contenedor con posicionamiento, o un wrapper que se estira raro en ciertos clientes.

Los culpables tipicos son estilos como position, z-index, transform, o elementos con display:block que invaden el area del CTA. En email, muchos clientes tienen motores viejos y se comportan distinto a un navegador moderno.

Fix: simplifica el layout alrededor del boton. Evita posicionamiento absoluto. Usa tablas para estructura, manteniendo margenes y paddings dentro de celdas. Si hay una imagen cerca, revisa que no tenga un enlace gigante encima.

4) Outlook y el tema de VML (cuando el boton se “muere”)

Outlook de escritorio (Windows) usa Word para renderizar HTML, y eso cambia las reglas del juego. Botones con bordes redondeados, fondos y padding a veces no se muestran igual, o se vuelven dificiles de tocar. En algunos casos el texto se ve, pero la zona clickeable queda chiquita o desalineada.

Fix: usa un boton tipo “bulletproof” con tabla y enlace, y si tu diseno requiere fondo y radio perfecto en Outlook, considera un fallback con VML. No siempre es obligatorio, pero cuando tu audiencia es corporativa, vale la pena.

Tip rapido: si el problema solo existe en Outlook desktop, casi siempre es un tema de compatibilidad del motor.

5) El area clickeable es mas pequena de lo que parece (padding que no cuenta)

En algunos clientes, el padding aplicado al <a> no se respeta igual. Visualmente ves un boton grande, pero el enlace real queda solo en el texto. En movil, eso se siente como “no funciona” porque el dedo no le atina.

Fix: construye el boton con tabla: el padding va en el <td>, y el <a> se deja como bloque. Tambien ayuda poner display:inline-block donde sea compatible, pero la tabla suele ser mas segura.

6) Imagen como boton sin enlace correcto

Mucha gente usa una imagen como boton (un PNG con texto “Comprar ahora”), pero olvida enlazarla bien, o el cliente bloquea imagenes por defecto. Resultado: el usuario ve un rectangulo bonito, pero no hace clic, o ni siquiera carga.

• Si usas imagen, asegurate de envolverla en <a href="https://...">.
• Agrega texto alternativo (alt) y un fallback con boton de texto.
• No dependas solo de imagenes para el CTA principal.

Fix: prioriza boton HTML con texto y fondo. Si quieres imagen, que sea decorativa, no el CTA unico.

7) Tracking, redirecciones y filtros de seguridad

A veces el boton funciona, pero el enlace trae tracking agresivo o una cadena larga de redirecciones. Algunos clientes o gateways corporativos lo marcan como sospechoso, lo reescriben o lo bloquean. En ese escenario, el usuario da clic y le sale un warning, o simplemente no abre.

Fix: reduce la cadena de redirecciones. Usa dominios confiables, HTTPS, y evita acortadores raros. Si necesitas medir, usa un proveedor serio o tu propio dominio de tracking. Mantente consistente con reputacion.

8) Dark mode y colores que “desaparecen”

En modo oscuro, algunos clientes cambian colores automaticamente. Un boton puede terminar con texto oscuro sobre fondo oscuro, o con borde invisible. La gente piensa que no es boton, o no identifica el CTA. No es exactamente que “no funcione”, pero el resultado es el mismo: cero clics.

Fix: define colores de fondo y texto con suficiente contraste, y prueba en dark mode. Evita textos muy delgados. Si puedes, agrega un borde sutil que sobreviva a inversiones de color. Y pon un enlace de respaldo en texto debajo del boton (por si acaso).

9) Problemas de responsive: el boton se sale, se corta o se encoge

En movil, un CTA debe ser grande y centrado. Si tu layout usa columnas, floats o anchos fijos, el boton puede quedar fuera de pantalla, o encima de otra cosa. En iPhone Mail, por ejemplo, algunos estilos se interpretan distinto y el tap se vuelve inconsistente.

Fix: usa anchos fluidos, tablas responsivas simples, y evita dependencias fuertes de CSS moderno. Mejor una columna para el CTA principal. Y revisa que haya espacio alrededor: botones pegados a otros elementos se vuelven dificiles de tocar.

10) El enlace esta bien, pero la pagina destino falla en movil

A veces el problema no es el correo: el boton abre, pero la pagina tarda, redirecciona mal o rompe por cookies, region, o bloqueos de contenido. El usuario lo vive como “no abre”.

Fix: prueba el enlace desde iPhone y Android reales (o al menos emulacion), revisa si hay popups, interstitials o bloqueos por geolocalizacion. Si usas parametros, verifica que el servidor no los trate como sospechosos y que no haya reglas WAF rompiendo la visita.

Checklist rapido para diagnostico

Cuando un boton falla, no adivines: recorre esta lista y normalmente vas a encontrar el culpable.

1. El CTA es un <a href="https://..."> real (no button, no JS).
2. La URL es completa, sin espacios, y funciona al copiar/pegar desde el correo recibido.
3. No hay overlays: nada transparente tapando el area del boton.
4. El area clickeable es amplia (padding en td, no solo en el enlace).
5. En Outlook desktop, el boton sigue siendo clickeable y legible.
6. Tracking y redirecciones son razonables y con dominios confiables.
7. En dark mode el boton se distingue (contraste y fallback en texto).
8. En movil no se corta ni se encoge; se puede tocar sin precision quirurgica.
9. La pagina destino abre bien en movil y sin bloqueos raros.

Buenas practicas para que tu CTA nunca te deje mal

• Un CTA principal por seccion. Si pones 5 botones juntos, sube el riesgo de layout raro.
• Boton + enlace en texto como respaldo: “Si el boton no funciona, entra aqui”.
• Diseno simple: fondos solidos, tipografia clara, sin efectos complejos.
• Pruebas cruzadas: Gmail web, Gmail app, Outlook desktop, Outlook web, iPhone Mail.
• Tamano comodo: que se pueda tocar con el pulgar. El CTA no debe ser mini.

Si haces estas cinco cosas, reduces dramaticamente los casos donde el boton “se ve” pero no responde. Y de paso, mejoras conversion porque la gente entiende rapido a donde ir.