Generador de botones HTML para email a prueba de fallos
Outlook convierte los botones con estilo en enlaces simples. Crea botones HTML para email que funcionan en Outlook, Gmail y el resto de los principales clientes de email, sin escribir código.
Tu botón en cinco pasos
Los botones de email a prueba de fallos son botones de CTA hechos con HTML y CSS en lugar de imágenes. Los botones de imagen desaparecen cuando un cliente de email bloquea las imágenes, algo habitual en Outlook. Los botones a prueba de fallos siguen visibles y se pueden pulsar. Este generador crea botones responsive para Gmail, Outlook, Apple Mail, Yahoo Mail y el resto de los principales clientes de email, e incluye una versión VML para Outlook.
- 1
Personaliza tu botón
Define el texto, la URL, el tamaño de letra, los colores, el padding y el ancho para que encajen con el diseño de tu email.
- 2
Vista previa en directo
Mira el botón dentro de un email mientras lo cambias, en modo claro y oscuro, en un teléfono y en Outlook. Comprueba que encaja con tu marca antes de copiar el código.
- 3
Obtén el código HTML
El código responsive del botón se genera mientras escribes. No necesitas saber HTML en línea.
- 4
Copia y pega
Copia el HTML y pégalo en tu template de email en Account Engagement (Pardot), HubSpot o cualquier otra plataforma de email. Consulta las instrucciones por plataforma.
- 5
Listo para enviar
Tu botón está hecho para todos los principales clientes de email, así que se muestra como un botón clicable allí donde se abra el email.
Por qué usar esta herramienta gratuita
Un botón que funciona en Outlook, sin abrir un editor de código.
- Sencillez
Sin programar
Crea un botón de email responsive sin tocar código.
Empieza con uno de estos:
- Facilidad de uso
Vista previa en directo
Cambia colores, padding y alineación y mira cómo se actualiza el botón.
- Diseño responsive
Pensado para el teléfono
Hecho para clientes de email en escritorio y en teléfonos.
- Compatibilidad
Amplia compatibilidad con clientes de email
Funciona en Outlook, Gmail, Apple Mail y los demás clientes principales.
Hecho para todos los principales clientes de email
Los botones usan código VML de respaldo para Microsoft Outlook y HTML y CSS estándar para todos los demás clientes. Tus CTA se muestran correctamente en todas partes, incluso con las imágenes bloqueadas.
- GmailWeb, iOS, Android
- Outlook2013, 2016, 2019, 365
- Outlook.comWeb
- Apple MailmacOS, iOS
- Yahoo MailWeb, teléfono
- ThunderbirdEscritorio
Por qué Outlook necesita su propia versión: esquinas redondeadas (border-radius) en cada cliente de email (Can I email, se abre en una pestaña nueva) en Can I email.
Cómo usar tu botón en plataformas de marketing
El HTML funciona en cualquier plataforma de email marketing que acepte HTML personalizado.
Cómo insertarlo en Pardot
- Genera el código de tu botón con la herramienta de arriba
- En Account Engagement, abre el contenido de tu email o tu template de email y haz clic en Edit in Builder
- Arrastra un componente HTML hasta donde va el botón
- Pega el código en su campo HTML Value (hasta 10.000 caracteres por campo)
- Guarda y envía una prueba al Outlook clásico
Cómo insertarlo en Marketing Cloud Next
- Genera el código de tu botón con la herramienta de arriba
- Abre tu email en el editor de emails de Marketing Cloud Next
- Arrastra un componente HTML hasta donde va el botón
- Pega el código de tu botón a prueba de fallos; si no se guarda, añade un espacio o un salto de línea después
- Guarda y envía una prueba al Outlook clásico
Cómo insertarlo en HubSpot
- Genera el código de tu botón con la herramienta de arriba
- Abre tu email en el editor de emails de HubSpot
- Arrastra un módulo Custom HTML a tu email
- Pega el código de tu botón a prueba de fallos en el campo HTML
- Previsualiza y prueba tu email
Nota: Los botones integrados de HubSpot funcionan razonablemente bien en Outlook. Los botones a prueba de fallos te dan más control sobre el diseño y una versión específica para Outlook.
Cómo insertarlo en Mailchimp
- Genera el código de tu botón con la herramienta de arriba
- En tu campaña de Mailchimp, añade un bloque de contenido Code
- Pega el código de tu botón a prueba de fallos
- Usa la vista previa de Mailchimp para probarlo en distintos dispositivos
Alternativa: También puedes editar el código fuente HTML de cualquier bloque de texto haciendo clic en el icono de código.
Cómo insertarlo en Marketo
- Genera el código de tu botón con la herramienta de arriba
- Abre tu template de email en el editor de emails de Marketo
- Haz clic en una sección HTML editable o añade un módulo HTML
- Cambia al modo HTML en el editor de texto enriquecido
- Pega el código de tu botón a prueba de fallos
- Guarda y aprueba tu email
Cómo insertarlo en Klaviyo
- Genera el código de tu botón con la herramienta de arriba
- En el editor de email de Klaviyo, arrastra un bloque Text a tu email
- Haz clic en el botón Source de la barra de herramientas de texto
- Pega el código de tu botón a prueba de fallos
- Haz clic en Save
Diseña botones de email que consigan clics
Seis consejos para que la gente haga clic de verdad en tus botones.
- Consejo 1
Usa verbos de acción
Abre con un verbo, como “Empieza ahora”, “Descarga ahora” o “Reserva tu lugar”. Evita textos genéricos como “Haz clic aquí” o “Enviar”.
- Consejo 2
Crea contraste
Usa un color que contraste con el fondo de tu email y que no aparezca en otras partes del diseño.
- Consejo 3
Sé breve
Lo ideal son entre dos y cuatro palabras. Si necesitas más de cinco, usa un enlace de texto.
- Consejo 4
Usa un solo botón
Que tus botones no compitan entre sí. Usa un CTA claro por sección del email para que los lectores sepan exactamente dónde hacer clic.
- Consejo 5
Tamaño pensado para teléfonos
Los botones deben medir al menos 200 px de ancho y 50 px de alto. Apple recomienda un área táctil mínima de 44×44 puntos.
- Consejo 6
Deja espacio en blanco
Deja suficiente espacio alrededor del botón para que no se vea apretado. Así es más fácil verlo y pulsarlo en el teléfono.
Modo oscuro y botones accesibles
Algunas bandejas de entrada cambian tus colores, y hay lectores que no los distinguen bien. Seis cosas que comprobar antes de enviar.
El modo oscuro puede cambiar los colores. Litmus clasifica las bandejas de entrada en tres grupos: sin cambios (Apple Mail), fondos claros que pasan a oscuros (Outlook.com, la app de Gmail en Android) y todos los colores invertidos (la app de Gmail en iPhone, Outlook para Windows). Gmail y Outlook.com también pueden invertir los colores de los botones.
El relleno VML se mantiene. En modo oscuro, Office 365 para Windows invierte los colores de fondo, pero deja el relleno del botón VML tal cual, según comprobó Litmus. Elige un color que funcione sobre fondo claro y oscuro, y compruébalo con la opción Oscuro de la vista previa.
- Contraste de 4,5:1. WCAG 2.2 pide 4,5:1 entre texto y fondo, y 3:1 para texto grande (unos 24 px, o 18,5 px en negrita). El generador muestra tu relación de contraste mientras escribes.
- Lo bastante grande para pulsarlo. WCAG 2.2 fija 24 por 24 píxeles CSS como mínimo (AA) y 44 por 44 como nivel mejorado (AAA). Apple pide al menos 44 por 44 puntos. El generador avisa si un botón mide menos de 44 px de alto.
- Texto que dice adónde lleva. WCAG 2.2 pide que el propósito de un enlace quede claro por su texto o por su contexto. “Descarga la lista de precios” le dice al lector qué pasa; “Haz clic aquí” necesita la frase que lo rodea.
- Texto real, sin imagen. El enlace HTML es texto real: se ve con las imágenes desactivadas y los lectores de pantalla lo leen como un enlace. Litmus desaconseja los botones de imagen por ambos motivos. También señala que VML trae sus propias complicaciones de accesibilidad, así que la parte VML queda solo para Outlook clásico.
El Outlook clásico frente al nuevo Outlook
Solo Outlook clásico para Windows lee la parte VML. El nuevo Outlook para Windows, Outlook en la web, Outlook para Mac y las apps para teléfono muestran el enlace HTML con sus esquinas redondeadas. Mantén el VML de todos modos: Microsoft da soporte a Outlook clásico al menos hasta 2029.
Qué parte del código muestra cada versión
- Outlook clásico para Windows (2007 a 2019, Microsoft 365)
Motor: el motor HTML de WordVML - Nuevo Outlook para Windows
Motor: Outlook en la web, dentro de una app (WebView2)HTML - Outlook en la web, Outlook.com
Motor: el navegadorHTML - Outlook para Mac
Motor: WebKitHTML - Outlook para iPhone y Android
Motor: uno basado en WebKitHTML
Comparativa de métodos para botones a prueba de fallos
La guía de Litmus describe cinco formas de programar un botón de email. Solo VML mantiene las esquinas redondeadas en Outlook clásico para Windows, así que este generador escribe VML para Outlook y un enlace HTML simple para todas las demás bandejas de entrada.
| Método | Esquinas en Outlook clásico | Clicable en Outlook clásico | Cuidado con |
|---|---|---|---|
| VML + enlace HTML (este generador) | Redondeadas | Todo el botón | Dos versiones de un mismo botón, así que el enlace aparece dos veces. Litmus señala que algunas plataformas de email no hacen seguimiento del enlace de la parte VML. |
| Padding condicional (el que usa Litmus) | Cuadradas | Todo el botón | Código exclusivo de Outlook para ajustar el padding. |
| Padding en el enlace | Cuadradas | Solo el texto | Outlook clásico solo acepta padding en las celdas de tabla. |
| Borde en el enlace | Cuadradas | Todo el botón | Outlook dibuja los bordes un poco más finos, así que el tamaño del botón cambia. |
| Padding en la celda, enlace dentro | Cuadradas | Litmus no lo indica | El color y el tamaño están en dos etiquetas, así que cada cambio se hace dos veces. |
Una imagen no sirve: desaparece cuando las imágenes están desactivadas, y puede que los lectores de pantalla no la lean.
El código del botón, línea a línea
Qué hace cada parte del código generado, de arriba abajo. El ejemplo es el valor predeterminado del generador: 250 px de ancho, esquinas de 6 px.
<table role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%">
<tr>
<td align="center">
<!--[if mso]>
<v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="https://example.com/" style="height:47px;v-text-anchor:middle;width:250px;" arcsize="13%" stroke="f" fillcolor="#2563EB">
<w:anchorlock/>
<center style="color:#FFFFFF;font-family:Arial,Helvetica,sans-serif;font-size:16px;font-weight:bold;">Get Started</center>
</v:roundrect>
<![endif]-->
<!--[if !mso]><!-->
<a href="https://example.com/" target="_blank" style="display:inline-block;width:202px;padding:14px 24px;background-color:#2563EB;border-radius:6px;color:#FFFFFF;font-family:Arial,Helvetica,sans-serif;font-size:16px;font-weight:bold;line-height:1.2;text-align:center;text-decoration:none;-webkit-text-size-adjust:none;">Get Started</a>
<!--<![endif]-->
</td>
</tr>
</table><table role="presentation">Una celda de tabla contiene el botón y su alineación, un diseño que leen todas las bandejas de entrada. El atributo role indica a los lectores de pantalla que la tabla es de maquetación, no de datos; el enlace de dentro se sigue leyendo como enlace.<!--[if mso]>…<![endif]-->Un comentario condicional. Las versiones de escritorio de Outlook para Windows que muestran el email con Word leen lo que hay dentro; todas las demás bandejas de entrada ven un comentario y lo ignoran.xmlns:vyxmlns:wDeclaran los dos vocabularios que usa la parte de Outlook:v:para VML (urn:schemas-microsoft-com:vml) yw:para Word (urn:schemas-microsoft-com:office:word). Como se declaran en la propia forma, el fragmento funciona en cualquier template.<v:roundrect>El rectángulo redondeado de VML: el botón en Outlook clásico.hrefconvierte toda la forma en un enlace,fillcolorla colorea, el alto y el ancho son píxeles fijos yv-text-anchor:middlecentra el texto en vertical.stroke="f"significa sin borde; con borde llevastrokecolorystrokeweight.arcsizeLo redondeadas que son las esquinas, en porcentaje. Microsoft lo define como una fracción de la mitad del lado más corto: 0% es cuadrada, 100% da extremos redondos. El generador convierte tu radio de esquina en este valor igual que el generador de Campaign Monitor (radio dividido por alto). Si las esquinas deben coincidir exactamente, envía una prueba a Outlook clásico.<w:anchorlock/>Un elemento del vocabulario de Word. Microsoft lo define como “Anchor Location Is Locked”: una aplicación que edite el documento no debe mover el ancla de la forma. El código de botón de Campaign Monitor y el de Litmus también lo llevan; ninguno explica por qué.<center>El texto del botón dentro de la forma, centrado, con el color, la fuente, el tamaño y el grosor que elijas.<!--[if !mso]><!-->y<a>“Si no es mso”: todas las bandejas de entrada excepto Outlook clásico reciben este enlace. El padding, el color de fondo, el borde yborder-radiuslo convierten en un botón. Outlook clásico lo ignora, así que nadie ve dos botones.
Preguntas frecuentes sobre el generador de botones para email
Lo que preguntan los marketers sobre los botones a prueba de fallos y este generador.
¿Qué es un botón de email a prueba de fallos?
Un botón de email a prueba de fallos es un botón CTA programado en HTML y CSS que se muestra correctamente en todos los clientes de email, incluso cuando las imágenes están bloqueadas.
A diferencia de los botones hechos con imágenes, los botones a prueba de fallos siguen visibles y clicables en Outlook y en otros clientes que desactivan las imágenes por defecto.
¿Por qué no funcionan mis botones de email en Outlook?
Microsoft Outlook muestra los emails con el motor de Word, no con el de un navegador. Ese motor no aplica bien a los enlaces propiedades CSS como border-radius, padding y background-color, así que tu botón con estilo aparece como un simple enlace de texto.
Los botones a prueba de fallos lo resuelven con código VML (Vector Markup Language) dentro de comentarios condicionales que solo lee Outlook, mientras que todos los demás clientes de email reciben HTML/CSS estándar. Este generador escribe las dos versiones por ti.
Los botones generados están hechos para Microsoft Outlook 2013, 2016, 2019 y Microsoft 365 (Outlook clásico para Windows), además de Gmail, Apple Mail, Yahoo Mail y los demás clientes de email principales.
¿Puedo usar imágenes como botones de email?
Te desaconsejamos usar imágenes como botones CTA principales. La mayoría de los clientes de email bloquean las imágenes por defecto por motivos de seguridad y privacidad. Entonces tu botón desaparece por completo y los lectores solo ven el texto alternativo o nada.
Los botones a prueba de fallos hechos en HTML siguen visibles y clicables con las imágenes desactivadas, así que tu llamada a la acción siempre está ahí.
¿Necesito saber programar para usar esta herramienta?
No. Ajusta los colores, el padding, el texto y el tamaño en los campos del formulario; después copia el HTML y pégalo en tu template de email.
¿Puedo usar estos botones en Pardot, HubSpot o Marketo?
Sí. El HTML funciona con cualquier plataforma de email marketing, como Account Engagement (Pardot), HubSpot, Marketo y Mailchimp. Pega el código en el editor HTML de tu template de email.
¿Cómo cambio el color del botón para que coincida con mi marca?
Elige el color de tu marca con el selector Fondo del generador de arriba, o introduce su código HEX (como #FF5733) para que coincida exactamente.
Después ajusta el color del texto para que el contraste siga siendo legible. Texto blanco sobre fondo oscuro o texto oscuro sobre fondo claro suele funcionar mejor.
¿Qué tamaño de botón es ideal para emails en el teléfono?
Las Human Interface Guidelines de Apple recomiendan un área táctil mínima de 44×44 puntos. Para los botones de email, recomendamos al menos 200 píxeles de ancho y 50 píxeles de alto.
Así el botón es fácil de tocar en un teléfono sin pulsar por error lo que hay alrededor. Deja dentro del botón un padding de al menos 12 a 15 píxeles por cada lado.
¿Qué diferencia hay entre los botones con VML y sin VML?
VML (Vector Markup Language) es código propio de Microsoft que se usa para mostrar botones en Outlook. Los botones VML ofrecen más opciones de estilo, pero requieren código complejo. Este generador escribe ese código por ti: una versión VML para Outlook, envuelta en comentarios condicionales que solo lee Outlook, y tablas HTML estándar con CSS en línea para todos los demás clientes.
¿Qué hace w:anchorlock en un botón a prueba de fallos?
Viene del vocabulario de Word: Microsoft lo define como “Anchor Location Is Locked”, de modo que una aplicación que edite el documento no mueva la forma.
Los botones VML de Campaign Monitor y de Litmus también lo incluyen, sin explicar por qué. Déjalo: está dentro de la parte VML, que solo lee el Outlook clásico.
¿El nuevo Outlook para Windows necesita VML?
No. El nuevo Outlook para Windows se basa en Outlook en la web y muestra el enlace HTML con sus esquinas redondeadas.
Mantén la parte VML para el Outlook clásico para Windows, al que Microsoft da soporte al menos hasta 2029. Las dos partes nunca se muestran a la vez.
Más herramientas gratuitas
Hacemos que tu marketing en Salesforce trabaje para ti
Habla con un consultor certificado, no con un vendedor, y sal de la primera llamada sabiendo cuál es tu siguiente paso.