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: