1) El “motor” del cliente de correo no soporta tu HTML/CSS

La web moderna se apoya en CSS avanzado, pero el email es otra historia. Muchos clientes de correo usan motores antiguos o decisiones de compatibilidad conservadoras. El caso más conocido es Outlook de escritorio, que durante años ha renderizado HTML como si fuera un documento de Word, con soporte limitado de CSS. Eso significa que propiedades comunes en web (flex, grid, posiciones complejas, ciertos márgenes o fondos) pueden fallar.

Cuando el CSS no se aplica, el “botón” que creías tener (un enlace con estilos) se convierte en un simple texto. Si además el enlace estaba dentro de un contenedor mal soportado, puede quedar fuera del área visible o colapsar.

• Síntoma típico: el botón se ve como texto azul subrayado, o se va a una línea extraña.
• Otro síntoma: columnas que se apilan mal o se salen del ancho en móviles o Outlook.

Para evitarlo, la estrategia clásica sigue funcionando: layouts basados en tablas, CSS “simple” e inline cuando sea posible, y evitar dependencias fuertes de flexbox/grid en email.

2) CSS en <style> bloqueado o eliminado (sanitización)

Algunos clientes y gateways de seguridad “limpian” el HTML por prevención: eliminan etiquetas, atributos o reglas CSS que consideran peligrosas o irrelevantes. Esto incluye: <style> con reglas complejas, selectores avanzados, o incluso ciertas propiedades que han sido abusadas para tracking o comportamientos raros.

Si dependes de CSS en el head, un filtro puede dejarte con HTML “crudo”. El resultado: botones sin fondo, tipografías reemplazadas, padding desaparecido, márgenes raros. En casos extremos, el propio bloque del botón se rompe.

• Mejor práctica: prioriza CSS inline en los elementos críticos (CTA, contenedores clave, texto principal).
• Evita: selectores demasiado específicos, pseudo-elementos, animaciones y reglas experimentales.

3) El “botón” era una imagen… y las imágenes se bloquearon

Muchísimos correos siguen usando botones como imágenes (por ejemplo, un PNG con texto “Confirmar”). El problema es que muchos clientes bloquean imágenes por defecto, especialmente en primeras interacciones, o cuando el usuario no confía en el remitente.

Si tu botón era una imagen y no existe un enlace visible alternativo, el destinatario literalmente verá un espacio vacío. Incluso si el enlace existe, puede quedar sin “área clicable” clara si el HTML no está bien armado.

• Solución: usa “botón” como enlace con estilo (HTML + CSS) y no como imagen.
• Refuerzo: añade texto de fallback cerca del CTA: “Si no ves el botón, abre este enlace”.
• Accesibilidad: si usas imágenes, siempre con alt descriptivo.

4) Links y botones reescritos por seguridad o tracking

Muchas empresas usan capas de seguridad (gateways) o herramientas de marketing que reescriben enlaces: cambian la URL por una de tracking o por un “redirect” para analizar clics y proteger contra phishing. En general esto es normal, pero puede causar problemas si:

• Tu HTML depende de atributos específicos del enlace que la herramienta altera.
• El enlace original tiene caracteres especiales mal codificados.
• El botón usa JavaScript o eventos (que en email no deberían usarse), y la reescritura lo rompe.

También puede pasar que el cliente de correo marque el enlace como sospechoso y reduzca su visibilidad, o lo encierre en una capa de aviso. En algunos entornos corporativos, ciertos enlaces se bloquean por política.

Recomendación: usa URLs limpias, con HTTPS, sin cadenas excesivas de parámetros. Si necesitas tracking, mantén la estructura lo más estable posible y prueba el resultado final “reescrito”.

5) Dark Mode: colores invertidos y botones “invisibles”

El modo oscuro es una de las razones más subestimadas para que un botón “desaparezca”. Algunos clientes aplican transformaciones automáticas: invierten fondos, ajustan colores, cambian contraste. Si tu botón tiene fondo oscuro con texto oscuro (o fondo claro con texto claro tras la inversión), puede volverse ilegible y parecer que no existe.

Ejemplos típicos:

• Botón con fondo gris claro y texto blanco: en dark mode el fondo se oscurece pero el texto no se adapta.
• Botón con fondo transparente y borde fino: el borde se pierde con la inversión o con fondos oscuros.
• CTA basado en sombra: la sombra desaparece y el botón queda “plano” sobre el fondo.

Mitigación: trabaja con alto contraste y evita depender de transparencia. Si puedes, define estilos robustos para fondos y bordes y prueba en clientes conocidos por modificar colores.

6) Fuentes externas y estilos tipográficos que no cargan

En la web es común usar Google Fonts u otras fuentes externas. En email, muchas veces no cargan. Si el diseño depende de una fuente específica para el ancho del texto, el “reflow” puede romper líneas, empujar elementos y afectar la alineación del botón.

Además, algunos clientes ignoran estilos como letter-spacing o line-height de forma diferente, lo que cambia el tamaño de bloques y puede provocar recortes.

• Mejor práctica: define una pila de fuentes segura (system fonts) y no dependas de una sola tipografía externa.
• Evita:

7) Ancho fijo, media queries ignoradas y responsive incompleto

El responsive en email es delicado. Hay clientes que ignoran media queries, otros que las aplican parcialmente, y otros que reescalan contenido a su manera. Si construyes un layout con ancho fijo grande (por ejemplo 700–800px) y el cliente lo reduce, el botón puede quedar fuera de la zona visible o saltar al final.

Para estabilidad, muchos equipos usan un contenedor principal de ~600px, tablas y bloques apilables. Y si incluyes media queries, que sea como una mejora progresiva, no como requisito para que el email “funcione”.

8) Problemas de alineación: padding/margin y colapso de contenedores

En email, el soporte de margin/padding puede variar. Algunos clientes aplican márgenes de forma inesperada, otros colapsan espacios, y otros ignoran propiedades en elementos inline. Si tu botón es un enlace inline con padding, puede que el padding no funcione como esperas.

Un patrón muy usado para evitar esto es crear el botón como una tabla pequeña con una celda (td) con padding, dentro de la cual pones el enlace. Esto aumenta compatibilidad y mantiene área clicable.

9) Etiquetas o atributos “prohibidos” por filtros anti-phishing

Algunos filtros corporativos eliminan elementos que se han usado históricamente para phishing o tracking agresivo. También pueden penalizar correos con:

• Demasiados enlaces acortados o dominios sospechosos.
• Botones que apuntan a dominios diferentes del dominio del remitente sin contexto.
• HTML excesivamente complejo, con muchas capas y estilos no habituales.

En estos casos, el correo puede llegar “sanitizado” o con advertencias visuales. A veces el botón no se elimina, pero se reubica o se convierte en texto plano por seguridad.

10) El correo llegó como “texto plano” (o con una parte HTML dañada)

Si la parte HTML está mal formada (por ejemplo, etiquetas sin cerrar, anidación incorrecta, caracteres raros), algunos clientes fallan al parsear y muestran la versión de texto plano, o muestran HTML parcial. Eso hace que los botones “desaparezcan” porque eran parte del HTML roto.

También puede ocurrir si el servidor o proveedor de envío construye mal el MIME multipart/alternative o si el mensaje supera límites internos y se recorta.

• Regla de oro: HTML válido, sin scripts, sin dependencias raras y con estructura simple.
• Verifica:

Checklist práctico: cómo reducir fallos de botones y formato

Si quieres mejorar la consistencia sin convertir tu email en una pesadilla, usa este checklist:

1. Botón como HTML, no como imagen. Usa un enlace con estilos inline, y si necesitas máxima compatibilidad, construye el CTA con tabla + td con padding.
2. CSS crítico inline. Lo esencial (CTA, tipografías base, espaciados principales) mejor en inline para evitar que lo eliminen.
3. Evita layout moderno dependiente. Flexbox/grid como base suele romper en clientes con soporte limitado. Mejor tablas y bloques simples.
4. Alt y fallback. Si hay imágenes, siempre alt descriptivo. Y añade un enlace en texto como respaldo del CTA.
5. Contraste pensado para dark mode. Botones con fondo y texto de alto contraste. Evita transparencias y bordes demasiado finos.
6. URLs limpias y seguras. HTTPS, pocos parámetros, codificación correcta. Evita links raros o demasiado largos.
7. HTML bien formado. Cierra etiquetas, evita anidación incorrecta, y no uses scripts (no funcionan y generan desconfianza).
8. Pruebas en varios clientes. Al menos: Gmail web, Gmail app, Outlook desktop, Outlook web, Apple Mail / iOS Mail.
9. Peso razonable. Imágenes optimizadas, sin exceso de HTML. Un correo demasiado pesado puede recortarse o cargarse mal.
10. Consistencia de marca. Dominio del remitente y dominio del enlace alineados cuando sea posible. Reduce sospecha y reescritura agresiva.

Ejemplos de “casos reales” y diagnóstico rápido

El botón se ve como texto azul

Casi siempre es CSS bloqueado o no soportado. Si el estilo del enlace dependía de un <style> en el head, o de una clase compleja, el cliente lo ignoró. Solución: styles inline y construcción más compatible.

El botón no aparece en absoluto

Suele ser un botón-imagen con imágenes bloqueadas, o un contenedor que colapsó en el renderizado. Reemplaza por CTA HTML y añade un enlace textual alternativo.

Se ve bien en escritorio, mal en móvil

Responsive dependiente de media queries ignoradas, o ancho fijo demasiado grande. Asegura un diseño que funcione “sin responsive” y mejore con media queries, no al revés.

Outlook lo rompe todo

Outlook desktop tiene restricciones especiales. Enfócate en tablas, espaciado en celdas y estilos inline. Evita propiedades CSS modernas y pruebas “solo en navegador”.

Conclusión: el email es un entorno hostil, pero predecible

Los correos se rompen porque el ecosistema de clientes no es uniforme: cada uno interpreta el HTML/CSS a su manera, y además se meten capas de seguridad que limpian o modifican el contenido. La buena noticia es que, si construyes el CTA con compatibilidad alta, usas CSS inline para lo esencial, evitas dependencias modernas y pruebas en los clientes principales, el porcentaje de correos “sin botones” o con formato roto baja drásticamente.

Si tu prioridad es que el usuario haga clic, piensa como en ingeniería: el botón no es decoración, es una pieza crítica. Dale un fallback, dale contraste, dale HTML robusto, y tendrás un email que se sostiene incluso cuando el cliente decide “proteger” al usuario recortando estilos.