1) Imágenes remotas bloqueadas (y tu “botón” era una imagen)

Una causa súper común: el “botón” del correo no es un botón real, sino una imagen con texto. Muchos clientes bloquean imágenes remotas por defecto o hasta que el usuario toca “Mostrar imágenes”. Si tu CTA era una imagen, desaparece la llamada a la acción y parece que “no hay botón”.

• El usuario ve un hueco o un recuadro vacío.
• El correo se ve “sin diseño” porque todo era imagen.
• Si no hay alt text, ni siquiera aparece una pista.

Recomendación práctica: usa botones en HTML (con fallback) y deja las imágenes como apoyo, no como estructura. Si sí o sí usas imagen, agrega alt descriptivo y mantén el link accesible también como texto.

2) CSS limitado o eliminado (sobre todo en clientes estrictos)

En email, el CSS no se comporta como en web. Muchas propiedades se ignoran y algunas se “limpian”. Por ejemplo, estilos dentro de <style> pueden ser recortados, y clases complejas o selectores modernos a veces no aplican. Si el correo dependía de CSS externo, peor: la mayoría de clientes no lo va a cargar.

Lo más resistente suele ser el CSS inline (estilos directamente en cada elemento). Aunque se vea antiguo, funciona mejor. Además, propiedades como position, float, flex y grid son una lotería en varios clientes.

• Gmail es estricto con ciertas cosas, y reescribe HTML.
• Outlook (Windows) históricamente renderiza con motor tipo Word, con limitaciones fuertes.
• Apple Mail suele ser más “web-like”, pero no garantiza todo.

3) Botones “modernos” sin fallback

Un error frecuente es diseñar botones con técnicas modernas (bordes redondeados, sombras, gradientes, hover, pseudo-elementos) y asumir que todos los clientes lo interpretan igual. Cuando el cliente no soporta esas propiedades, el botón puede: verse como texto simple, perder padding, quedar invisible (si el color se rompe), o moverse fuera del layout.

Solución: construir el botón con una base simple y compatible: tabla + link (sí, tablas) o un <a> con inline CSS básico. Y si el cliente no soporta border-radius, que al menos se vea clicable.

4) Problemas con modo oscuro (Dark Mode) que “voltean” colores

Muchos usuarios en México traen el cel en modo oscuro. Algunos clientes de correo aplican cambios automáticos: invierten fondos, ajustan texto, cambian botones para “mejor contraste”. Si tu botón estaba diseñado con colores justitos (por ejemplo, texto oscuro sobre fondo oscuro), el modo oscuro puede dejarlo ilegible o “desaparecido”.

• Textos que se vuelven blancos sobre fondos claros.
• Fondos que se oscurecen, pero el texto no cambia como esperabas.
• Iconos PNG con fondo transparente que se pierden.

Tip: usa contrastes fuertes, evita texto “gris clarito” sobre fondos medio, y prueba el correo en modo claro/oscuro. También ayuda definir colores inline y evitar depender de transparencias para elementos críticos.

5) Fuentes no cargan y el layout se desacomoda

En web usas Google Fonts y todo bien. En email, no. Varios clientes no cargan fuentes remotas, y se van directo a una fuente por defecto. Cuando cambia la tipografía, cambia el ancho del texto, el alto de líneas y los saltos. El resultado: se descuadra el diseño, se rompen columnas o el “botón” queda cortado.

Recomendación: diseña asumiendo fuentes seguras (system fonts) o al menos con fallbacks bien definidos. Y evita cajas con altura fija para textos. Si el texto crece, tu layout debe aguantar.

6) Links rotos, tracking bloqueado o reescritura de URLs

A veces el botón “sí existe”, pero cuando lo intentas tocar no hace nada o el cliente lo oculta. ¿Por qué? Algunos filtros bloquean links con tracking agresivo, redirecciones múltiples, parámetros raros, o dominios recién creados. También ocurre que el cliente reescribe URLs por seguridad y eso puede romper un link mal formado.

• URLs demasiado largas con muchos parámetros.
• Redirecciones encadenadas (acortadores + tracking + redirección final).
• Dominios con reputación baja o nuevos.
• Inconsistencias entre el “texto del link” y el dominio real.

Si el proveedor detecta un patrón típico de phishing, puede ocultar el botón, marcarlo como inseguro o mover el correo a spam. Una CTA limpia con dominio confiable reduce este riesgo.

7) HTML “mal cerrado” o estructuras frágiles

En navegadores modernos, un HTML medio chueco a veces “se arregla solo”. En email, no siempre. Un <div> sin cerrar, una tabla mal anidada, un <br> mal colocado o un contenedor con estilos contradictorios puede hacer que el cliente recorte secciones completas.

Esto se nota cuando:

• Desaparece el footer o el header.
• Se “come” el botón o la sección donde vive el CTA.
• El correo se corta a la mitad o queda “pegado” el contenido.

Consejo: valida tu HTML, usa estructura simple, y si necesitas columnas, tablas bien formadas siguen siendo de lo más estable en email marketing.

8) Contenido recortado por tamaño (clipping)

Algunos clientes recortan correos largos o muy pesados (mucho HTML, demasiadas imágenes, demasiado CSS inline). Cuando se activa el recorte, el usuario ve un “Ver mensaje completo” y, dependiendo del cliente, algunas partes no cargan igual o se muestran fuera de contexto.

Esto no siempre elimina botones, pero sí puede afectar: imágenes que no cargan, secciones que quedan abajo y el usuario nunca ve, o CTAs que se pierden porque el mensaje queda “doblado”.

9) Bloqueo por políticas corporativas o apps de seguridad

En empresas es común que haya filtros (gateway, DLP, antiphishing) que sanitizan correos: quitan estilos, convierten HTML a texto, deshabilitan enlaces o reemplazan URLs por un “safe link”. A nivel usuario, también pasa con apps que protegen contra tracking.

El correo llega, pero se ve “pelón”. Sin botones, sin colores, sin nada fancy. No es un bug, es política. Por eso, siempre conviene tener un fallback: un link en texto además del botón, y un diseño que funcione aunque se degrade.

10) Errores típicos que rompen botones

• Texto del botón en imagen sin alt ni versión en texto.
• Padding solo en CSS no soportado y el botón queda micro.
• Color de texto igual al fondo por modo oscuro o reescritura.
• Divs con display:flex en clientes que lo ignoran y reacomodan todo.
• Botón dentro de contenedor con overflow hidden y se recorta.
• Links con caracteres raros o mal escapados y el CTA deja de ser clicable.

Buenas prácticas para que tu correo se vea bien (y el CTA no se pierda)

1. Botón real + fallback: usa un <a> con estilos inline simples y, si puedes, añade un link en texto debajo (“Si no ves el botón, usa este enlace…”).
2. Diseño “a prueba de Outlook”: evita layouts complejos y prueba en Outlook Windows, porque suele ser el más exigente.
3. CSS inline: lo más compatible en general. Minimiza dependencias de clases y estilos globales.
4. No dependas de imágenes para comunicar lo esencial. Las imágenes deben complementar, no reemplazar.
5. Contraste fuerte pensando en modo oscuro. Si dudas, sube el contraste.
6. Links limpios: menos redirecciones, dominios confiables, y evita parámetros exagerados.
7. Preheader y jerarquía clara: que el usuario entienda la acción aunque el diseño se degrade.

Checklist rápido cuando “falta el botón”

Si estás depurando un correo que se ve mal, este orden ayuda:

• ¿El botón era imagen y el cliente bloqueó imágenes remotas?
• ¿El CSS estaba en <style> y el cliente lo recortó?
• ¿Modo oscuro cambió colores y dejó el texto ilegible?
• ¿El link fue bloqueado por tracking/redirecciones?
• ¿Hay HTML roto (tablas mal cerradas, tags anidados mal)?
• ¿El correo pasó por un filtro corporativo que sanitiza HTML?

Con eso normalmente encuentras el motivo real en minutos, no en horas.