email
Botones a prueba de balas
Buscar..
Introducción
Observaciones
Mejora progresiva con consultas de medios
Para los clientes que admiten consultas de medios, cualquiera de los ejemplos anteriores se puede mejorar progresivamente el botón.
P.ej. @media screen and (-webkit-min-device-pixel-ratio: 0) { /* Insert -webkit-targeted CSS here */ }
Añadir más relleno horizontal en Outlook
La adición condicional de espacio sin interrupciones en cada lado de un enlace de botón puede aumentar el relleno horizontal para Outlook. Especialmente útil para botones basados en bordes.
`<!--[if mso]> <![endif]-->Link Text<!--[if mso]> <![endif]-->`
Buttons.cm Button
Campaign Monitor creó una herramienta ingeniosa que genera código para botones en el correo electrónico HTML. Utiliza una combinación de CSS y VML (para Microsoft Outlook) para mostrar imágenes de fondo o patrones en la mayoría de los principales clientes de correo electrónico.
<div><!--[if mso]>
<v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="http://www.stackoverflow.com" style="height:38px;v-text-anchor:middle;width:200px;" arcsize="8%" strokecolor="#7ea613" fill="t">
<v:fill type="tile" src=""https://imgur.com/clZqdfM.gif"" color="#99c739" />
<w:anchorlock/>
<center style="color:#ffffff;font-family:sans-serif;font-size:13px;font-weight:bold;">Stack Overflow</center>
</v:roundrect>
<![endif]--><a href="http://www.stackoverflow.com"
style="background-color:#99c739;background-image:url("https://imgur.com/clZqdfM.gif");border:1px solid #7ea613;border-radius:3px;color:#ffffff;display:inline-block;font-family:sans-serif;font-size:13px;font-weight:bold;line-height:38px;text-align:center;text-decoration:none;width:200px;-webkit-text-size-adjust:none;mso-hide:all;">Stack Overflow</a></div>
Mostrará algo como esto: 
nota : como el hipervínculo en Outlook está dentro de una etiqueta VML , algunos proveedores de servicios de correo electrónico tienen problemas para rastrear los clics en este enlace.
<v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="http://www.stackoverflow.com" style="height:38px;v-text-anchor:middle;width:200px;" arcsize="8%" strokecolor="#7ea613" fill="t">
Botones a base de relleno
Esta técnica se basa en el relleno en el nivel de celda de la tabla para estructurar el botón, y los atributos HTML y CSS para diseñar el botón. Ningún VML significa un código más simple, pero no hay imágenes de fondo en Outlook.
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td bgcolor="#0095FF" style="padding: 12px 18px 12px 18px; -webkit-border-radius:3px; border-radius:3px" align="center"><a href="http://www.stackoverflow.com" target="_blank" style="font-size: 14px; font-family: sans-serif; font-weight: normal; color: #ffffff; text-decoration: none; display: inline-block;">Stack Overflow</a></td>
</tr>
</table>
</td>
</tr>
</table>
El inconveniente de los botones basados en el relleno es que no se puede hacer clic en toda el área del botón, solo el enlace dentro de la celda de la tabla.
Botones de borde
Esta técnica se basa en agregar bordes gruesos al enlace en sí para construir el CTA del botón. El uso de bordes se entiende de manera universal por los clientes de correo electrónico, pero limita la apariencia de los botones de colores sólidos.
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td bgcolor="#0095FF" style="padding: 12px 18px 12px 18px; -webkit-border-radius:3px; border-radius:3px" align="center"><a href="http://www.stackoverflow.com" target="_blank" style="font-size: 14px; font-family: sans-serif; font-weight: normal; color: #ffffff; text-decoration: none; display: inline-block;">Stack Overflow</a></td>
</tr>
</table>
</td>
</tr>
</table>
La etiqueta de enlace está configurada para ser un elemento de nivel de bloque y los bordes se usan para proporcionar el relleno, por lo que todo el botón se puede hacer clic + hacer clic, incluso en clientes de escritorio más antiguos.
El inconveniente de los botones basados en bordes es que Outlook reducirá el tamaño de los bordes en una pequeña cantidad y, como se mencionó anteriormente, las imágenes de fondo no son compatibles.
Padding + Border-Based Buttons
Esta técnica utiliza una combinación de botones basados en bordes y en el relleno, que estilizan el enlace con ambos rellenos y al menos un borde sólido de 1px. El color de fondo debe aplicarse al en lugar del en este caso porque Outlook reconoce el relleno horizontal en la etiqueta (ya que no es una etiqueta de nivel de bloque).
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center" style="-webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px;" bgcolor="#0095FF"><a href="https://www.stackoverflow.com" target="_blank" style="font-size: 14px; font-family: sans-serif; color: #ffffff; text-decoration: none; text-decoration: none; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; padding: 12px 18px; border: 1px solid #0095FF; display: inline-block;">Stack Overflow</a></td>
</tr>
</table>
</td>
</tr>
</table>
El inconveniente de los botones de relleno + bordes basados en bordes es que separa el estilo entre las etiquetas <td> y <a> , por lo que puede ser difícil de mantener. Pero solo se utiliza un botón, no se requieren dimensiones específicas y se pueden admitir imágenes de fondo.
Botón a prueba de balas con espaciadores.
Este botón deriva de este ejemplo por correo electrónico sobre ácido. Está completamente basado en código, por lo que se mostrará sin imágenes descargadas, y se puede hacer clic en el botón completo + clic.
Además, este ejemplo también incluye espaciadores para ayudar a controlar la cantidad de espacio vertical que aparece antes y después del botón.
<table width="100%">
<tr>
<td>
<!-- Top Spacer : BEGIN -->
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td height="20" width="100%" style="font-size: 20px; line-height: 20px;">
</td>
</tr>
</table>
<!-- Top Spacer : END -->
<!-- Button : BEGIN -->
<table border="0" align="left" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td align="left">
<table border="0" cellpadding="0" cellspacing="0" width="150">
<tr>
<td align="center" bgcolor="#0077CC" width="150" style="-moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px;">
<a href="http://www.stackoverflow.com" style="padding: 10px; width:150px; display: block;text-decoration: none; border:0;text-align: center; font-weight: bold; font-size: 14px; font-family: sans-serif; color: #ffffff; background: #0095FF;border: 1px solid #0077CC; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; line-height:17px;" class="button_link">Stack Overflow</a>
</td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
<!-- Button : END -->
<!-- Bottom Spacer : BEGIN -->
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td height="20" width="100%" style="font-size: 20px; line-height: 20px;">
</td>
</tr>
</table>
<!-- Bottom Spacer : END -->
</td>
</tr>
</table>
