Configurações

Botões arredondados

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">

                                                                                                &nbsp;

                                                                                            </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">

                                                                                                &nbsp;

                                                                                            </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:


https://litmus.com/checklist/emails/public/2667af0