Saltar al contenido

Esquinas redondeadas en Outlook sin imágenes

Traemos la mejor solución que hemos encontrado on line. Queremos que te sea útil y si puedes aportar alguna mejora siéntete libre de hacerlo..

Solución:

Este código produce botones con esquinas redondeadas en Outlook 2010 utilizando los comentarios condicionales de Outlook () y VML:

    

Probado solo en Outlook 2010 y en los principales navegadores, no en OWA, Outlook.com ni en ningún navegador móvil. Vale la pena echarle un vistazo más de cerca. Crédito donde corresponda: http://www.industrydive.com/blog/how-to-make-html-email-buttons-that-rock/

http://www.campaignmonitor.com/css/ muestra todos los CSS compatibles con los principales clientes de correo electrónico. Los bordes redondeados ni siquiera llegaron a la lista. En la página hay un enlace a un PDF completo, que indica que el radio del borde es SOLAMENTE compatible con Thunderbird 2

tenga en cuenta que debe incrustar los estilos en los elementos html para admitir una amplia gama de clientes de correo electrónico

Puede encontrar la lista completa de elementos HTML y estilos CSS admitidos en la siguiente serie de artículos:

Capacidades de representación HTML y CSS de Word 2007 en Outlook 2007 (Parte 1 de 2)

Capacidades de representación de HTML y CSS de Word 2007 en Outlook 2007 (Parte 2 de 2)

Además de la respuesta de @VanAlberts que muestra el gran trabajo de Eli Dickinson. Aquí hay un enlace al repositorio git de Eli https://gist.github.com/elidickinson/9424116

Pensé en compartir mi mejora en el código de Eli que permite un botón de ancho dinámico basado en el texto interior.

Encontré este https://litmus.com/community/discussions/538-vml-outlook-07-10-13-unwanted-20px-padding-at-the-bottom que muestra cómo usar mso-fit-shape-to-text:true

Y este https://litmus.com/community/discussions/1269-flexible-multi-line-bulletproof-buttons que muestra cómo evitar un relleno no deseado.

este es mi resultado final


Parece funcionar muy bien en Outlook 2016, que usa Word para representar HTML

Recuerda algo, que tienes concesión de agregar una reseña si te fue de ayuda.

¡Haz clic para puntuar esta entrada!
(Votos: 0 Promedio: 0)



Utiliza Nuestro Buscador

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *