Como criar botões arredondados no HTML de email
Para criar botões arredondados você criar através deste exemplo de código
| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head> | |
| <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> | |
| <meta name="viewport" content="initial-scale=1.0"> | |
| <meta name="format-detection" content="telephone=no"> | |
| <title>Dinamize</title> | |
| <style type="text/css"> | |
| /* Resets: see reset.css for details */ | |
| .ReadMsgBody { width: 100%; background-color: #ffffff;} | |
| .ExternalClass {width: 100%; background-color: #ffffff;} | |
| .ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div {line-height:100%;} | |
| html{width: 100%; } | |
| body {-webkit-text-size-adjust:none; -ms-text-size-adjust:none; } | |
| body {margin:0; padding:0;} | |
| table {border-spacing:0;} | |
| img{display:block !important;} | |
| table td {border-collapse:collapse;} | |
| .yshortcuts a {border-bottom: none !important;} | |
| /* | |
| main color = #029510 | |
| background color = #ececec | |
| */ | |
| img{height:auto !important;} | |
| @media only screen and (max-width: 640px){ | |
| body{ | |
| width:auto!important; | |
| } | |
| table[class="container"]{ | |
| width: 100%!important; | |
| padding-left: 20px!important; | |
| padding-right: 20px!important; | |
| } | |
| img[class="image-100-percent"]{ | |
| width:100% !important; | |
| height:auto !important; | |
| max-width:100% !important; | |
| } | |
| img[class="small-image-100-percent"]{ | |
| width:100% !important; | |
| height:auto !important; | |
| } | |
| table[class="full-width"]{ | |
| width:100% !important; | |
| } | |
| table[class="full-width-text"]{ | |
| width:100% !important; | |
| background-color:#b91925; | |
| padding-left:20px !important; | |
| padding-right:20px !important; | |
| } | |
| table[class="full-width-text2"]{ | |
| width:100% !important; | |
| background-color:#f3f3f3; | |
| padding-left:20px !important; | |
| padding-right:20px !important; | |
| } | |
| table[class="col-2-3img"]{ | |
| width:50% !important; | |
| margin-right: 20px !important; | |
| } | |
| table[class="col-2-3img-last"]{ | |
| width:50% !important; | |
| } | |
| table[class="col-2"]{ | |
| width:47% !important; | |
| margin-right:20px !important; | |
| } | |
| table[class="col-2-last"]{ | |
| width:47% !important; | |
| } | |
| table[class="col-3"]{ | |
| width:29% !important; | |
| margin-right:20px !important; | |
| } | |
| table[class="col-3-last"]{ | |
| width:29% !important; | |
| } | |
| table[class="row-2"]{ | |
| width:50% !important; | |
| } | |
| td[class="text-center"]{ | |
| text-align: center !important; | |
| } | |
| /* start clear and remove*/ | |
| table[class="rem"]{ | |
| display:none !important; | |
| } | |
| td[class="rem"]{ | |
| display:none !important; | |
| } | |
| /* end clear and remove*/ | |
| table[class="fix-box"]{ | |
| padding-left:20px !important; | |
| padding-right:20px !important; | |
| } | |
| td[class="fix-box"]{ | |
| padding-left:20px !important; | |
| padding-right:20px !important; | |
| } | |
| td[class="font-resize"]{ | |
| font-size: 18px !important; | |
| line-height: 22px !important; | |
| } | |
| table[class="space-scale"]{ | |
| width:100% !important; | |
| float:none !important; | |
| } | |
| } | |
| @media only screen and (max-width: 479px){ | |
| body{ | |
| font-size:10px !important; | |
| } | |
| table[class="container"]{ | |
| width: 100%!important; | |
| padding-left: 10px!important; | |
| padding-right:10px!important; | |
| } | |
| table[class="container2"]{ | |
| width: 100%!important; | |
| float:none !important; | |
| } | |
| img[class="image-100-percent"]{ | |
| width:100% !important; | |
| height:auto !important; | |
| max-width:100% !important; | |
| min-width:124px !important; | |
| } | |
| img[class="small-image-100-percent"]{ | |
| width:100% !important; | |
| height:auto !important; | |
| max-width:100% !important; | |
| min-width:124px !important; | |
| } | |
| table[class="full-width"]{ | |
| width:100% !important; | |
| } | |
| table[class="full-width-text"]{ | |
| width:100% !important; | |
| background-color:#b91925; | |
| padding-left:20px !important; | |
| padding-right:20px !important; | |
| } | |
| table[class="full-width-text2"]{ | |
| width:100% !important; | |
| background-color:#f3f3f3; | |
| padding-left:20px !important; | |
| padding-right:20px !important; | |
| } | |
| table[class="col-2"]{ | |
| width:100% !important; | |
| margin-right:0px !important; | |
| } | |
| table[class="col-2-last"]{ | |
| width:100% !important; | |
| } | |
| table[class="col-3"]{ | |
| width:100% !important; | |
| margin-right:0px !important; | |
| } | |
| table[class="col-3-last"]{ | |
| width:100% !important; | |
| } | |
| table[class="row-2"]{ | |
| width:100% !important; | |
| } | |
| table[id="col-underline"]{ | |
| float: none !important; | |
| width: 100% !important; | |
| border-bottom: 1px solid #eee; | |
| } | |
| td[id="col-underline"]{ | |
| float: none !important; | |
| width: 100% !important; | |
| border-bottom: 1px solid #eee; | |
| } | |
| td[class="col-underline"]{ | |
| float: none !important; | |
| width: 100% !important; | |
| border-bottom: 1px solid #eee; | |
| } | |
| /*start text center*/ | |
| td[class="text-center"]{ | |
| text-align: center !important; | |
| } | |
| div[class="text-center"]{ | |
| text-align: center !important; | |
| } | |
| /*end text center*/ | |
| /* start clear and remove */ | |
| table[id="clear-padding"]{ | |
| padding:0 !important; | |
| } | |
| td[id="clear-padding"]{ | |
| padding:0 !important; | |
| } | |
| td[class="clear-padding"]{ | |
| padding:0 !important; | |
| } | |
| table[class="remove-479"]{ | |
| display:none !important; | |
| } | |
| td[class="remove-479"]{ | |
| display:none !important; | |
| } | |
| table[class="clear-align"]{ | |
| float:none !important; | |
| } | |
| /* end clear and remove */ | |
| table[class="width-small"]{ | |
| width:100% !important; | |
| } | |
| table[class="fix-box"]{ | |
| padding-left:0px !important; | |
| padding-right:0px !important; | |
| } | |
| td[class="fix-box"]{ | |
| padding-left:0px !important; | |
| padding-right:0px !important; | |
| } | |
| td[class="font-resize"]{ | |
| font-size: 14px !important; | |
| } | |
| td[class="increase-Height"]{ | |
| height:10px !important; | |
| } | |
| td[class="increase-Height-20"]{ | |
| height:20px !important; | |
| } | |
| } | |
| @media only screen and (max-width: 320px){ | |
| table[class="width-small"]{ | |
| width:125px !important; | |
| } | |
| img[class="image-100-percent"]{ | |
| width:100% !important; | |
| height:auto !important; | |
| max-width:100% !important; | |
| min-width:124px !important; | |
| } | |
| .preheader { display:none !important; visibility:hidden; opacity:0; color:transparent; height:0; width:0; } | |
| } | |
| </style> | |
| </head> | |
| <body style="font-size:12px; background-color:#E3E3E3;"> | |
| <span class="preheader" style="display: none!important; visibility: hidden; opacity: 0; color: transparent; height: 0; width: 0;">Definir um Preheader aqui</span> | |
| <table width="100%" id="mainStructure" border="0" cellspacing="0" cellpadding="0" style="background-color:#E3E3E3;" bgcolor="#E3E3E3"> | |
| <tbody> | |
| <tr> | |
| <td align="center" valign="top" class="fix-box" bidbg="1" bgcolor=""> | |
| <table width="600" align="center" border="0" cellspacing="0" cellpadding="0" class="container" bgcolor="#ffffff" style="background-color: #ffffff; border-bottom:2px solid #c7c7c7; "> | |
| <tbody><tr> | |
| <td valign="top"> | |
| <table width="560" align="center" border="0" cellspacing="0" cellpadding="0" class="full-width" bgcolor="#ffffff" style="background-color:#ffffff;"> | |
| <tbody><tr> | |
| <td height="20"></td> | |
| </tr> | |
| <tr> | |
| <td valign="top"> | |
| <table border="0" cellspacing="0" cellpadding="0" align="left"> | |
| <tbody><tr> | |
| <td style="font-size: 18px; line-height: 22px; font-family: Tahoma, Helvetica, sans-serif; color:#000000; font-weight:bold; text-align:left;"> | |
| <span style="color: #000000; font-weight:bold;"> | |
| <a href="#" style="text-decoration: none; color: #000000; font-weight: bold;"> | |
| Título aqui | |
| </a> | |
| </span> | |
| </td> | |
| </tr> | |
| <tr> | |
| <td height="15"></td> | |
| </tr> | |
| <tr> | |
| <td style="font-size: 13px; line-height: 15px; font-family:Tahoma, Helvetica, sans-serif; color:#000000; font-weight:normal; text-align:left; "> | |
| Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempam et justo duo dolores et ea rebum. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempam et justo duo dolores et ea rebum. | |
| </td> | |
| </tr> | |
| <tr> | |
| <td height="20"></td> | |
| </tr> | |
| <tr> | |
| <td valign="top" width="auto" align="center"> | |
| <table border="0" align="center" cellpadding="0" cellspacing="0"> | |
| <tbody><tr> | |
| <td width="auto" align="center" valign="middle" height="32" style=" background-color:#029510; border-radius:24px; background-clip: padding-box;font-size:13px; font-family: Tahoma, Helvetica, sans-serif; text-align:center; color:#ffffff; font-weight: normal; padding-left:18px; padding-right:18px; "> | |
| <span style="color: #ffffff; font-weight: normal;"> | |
| <a href="#" style="text-decoration: none; color: #ffffff; font-weight: normal;"> | |
| Botão 1 | |
| </a> | |
| </span> | |
| </td> | |
| <td valign="top"> | |
| <table width="20" border="0" align="center" cellpadding="0" cellspacing="0"> | |
| <tbody><tr> | |
| <td valign="top"> | |
| | |
| </td> | |
| </tr> | |
| </tbody></table> | |
| </td> | |
| <td width="auto" align="center" valign="middle" height="32" style=" background-color:#EA4335; border-radius:24px; background-clip: padding-box;font-size:13px; font-family: Tahoma, Helvetica, sans-serif; text-align:center; color:#ffffff; font-weight: normal; padding-left:18px; padding-right:18px; "> | |
| <span style="color: #ffffff; font-weight: normal;"> | |
| <a href="#" style="text-decoration: none; color: #ffffff; font-weight: normal;"> | |
| Botão 2 | |
| </a> | |
| </span> | |
| </td> | |
| <td valign="top"> | |
| <table width="20" border="0" align="center" cellpadding="0" cellspacing="0"> | |
| <tbody><tr> | |
| <td valign="top"> | |
| | |
| </td> | |
| </tr> | |
| </tbody></table> | |
| </td> | |
| <td width="auto" align="center" valign="middle" height="32" style=" background-color:#0078ff; border-radius:24px; background-clip: padding-box;font-size:13px; font-family: Tahoma, Helvetica, sans-serif; text-align:center; color:#ffffff; font-weight: normal; padding-left:18px; padding-right:18px; "> | |
| <span style="color: #ffffff; font-weight: normal;"> | |
| <a href="#" style="text-decoration: none; color: #ffffff; font-weight: normal;"> | |
| Botão 3 | |
| </a> | |
| </span> | |
| </td> | |
| </tr> | |
| </tbody></table> | |
| </td> | |
| </tr> | |
| </tbody></table> | |
| </td> | |
| </tr> | |
| <tr> | |
| <td height="20"></td> | |
| </tr> | |
| </tbody></table> | |
| </td> | |
| </tr> | |
| </tbody></table> | |
| </td> | |
| </tr></tbody></table> | |
| </body></html> |
Aqui segue a pré-visualização de como aparecerá na maioria dos dispositivos e navegadores: