Search code examples
htmlcssemailoutlooknewsletter

Place <a> over the border ? Mail Newsletter

I want to put the <a> tag over the border like the image, but it must be responsive in outlook 2013.

Outlook doesn't support Max-Height , paddings only in table elements ( td, th, tr ) , any question https://www.campaignmonitor.com/css/

How i want the table!

<table style="padding-left:28px;padding-right:27px;" cellpadding="0" cellspacing="0" width="100%" align="left"
        border="0">
        <tr>
            <td height="50" class="block" style="border:10px solid #efefef;text-align:left;    padding: 20px 20px 0px 20px;">
                <p style="color:#000000;font-size:16px;font-weight:700;line-height:21px;margin-bottom:10px;text-align:justify;   margin: 0;
                color: #737373;
                font-size: 15px;
                font-weight: 700;
                text-transform: uppercase;
                margin-bottom: 9px;">Example</p>
                <p style="margin:0;color:#000000;font-size:16px;font-weight:700;line-height:21px;margin-bottom:15px; ">Example
                   xxxx</p>

                <table style="color:white;border-left: 10px solid #ffffff;
                border-right: 10px solid #ffffff;"
                    width="100%" border="0" cellpadding="0" cellspacing="0">
                    <tr>
                        <td align="center" valign="top" style="padding:0px 0px 0px 0px;" bgcolor="#ed1c2e">
                            
                            <a style="color:#ffffff;outline:none;cursor:pointer;width:100%;height:40px;border:none;padding-left:0px;padding-right:0px;font-size:16px;font-weight:700; text-align: center;">See
                                more <i style="    font-size: 29px;
                                                vertical-align: -5px;
                                                font-style: normal;">➝</i>
                            </a>

                        </td>

                    </tr>
                </table>


            </td>

        </tr>

    </table>

Solution

  • Here it is, an working example of what you are looking for:

    <html>
<head>
<style>
    button:focus {
        outline: none;
        cursor: pointer
    }

    body {
        font-family: 'Arial';
    }
</style>
</head>
<body>
<table style="padding-left:28px;padding-right:27px;" cellpadding="0" cellspacing="0" width="100%" align="left" border="0">
    <tbody>
        <tr>
            <td height="50" class="block" style="border:10px solid #efefef;text-align:left;padding: 20px 20px 0px 20px;border-bottom: 0px;">
                <p style="color:#000000;font-size:16px;font-weight:700;line-height:21px;margin-bottom:10px;text-align:justify;   margin: 0;
            color: #737373;
            font-size: 15px;
            font-weight: 700;
            text-transform: uppercase;
            margin-bottom: 9px;">Campanha</p>
                <p style="margin:0;color:#000000;font-size:16px;font-weight:700;line-height:21px;margin-bottom:15px; ">Estratégia
                    nacional de Turismo 2027</p>
            </td>
        </tr>
    </tbody>
</table>
<table style="padding-left:28px;padding-right:27px;" cellpadding="0" cellspacing="0" width="100%" align="left" border="0">
    <tbody>
        <tr>
            <td style="margin: 0px;padding: 0px;width: 10px;">
                <table style="color:white;background-color: #efefef;padding: 10px 0px 0px 0px;margin-right: 10px;" width="" align="right" border="0" cellpadding="0" cellspacing="0">
                    <tbody>
                        <tr>
                            <td bgcolor="#ed1c2e" style="
                                    text-align: center;
                                    padding-left: 20px;
                                    padding-top: 24px;
                                    width: 23px;
                                    background-color: white;
                                    ">
                            </td>
                        </tr>
                    </tbody>
                </table>
            </td>
            <td align="center" valign="top" style="padding: 0px 0px 0px 0px;" bgcolor="#ed1c2e">
                <a style="color:#ffffff;outline:none;cursor:pointer;width:100%;height:40px;border:none;padding-left:0px;padding-right:0px;font-size:16px;font-weight:700; text-align: center;">Ver
                    mais <i style="font-size: 29px; vertical-align: -5px; font-style: normal;">?</i>
                </a>
            </td>
            <td style="margin: 0px; padding: 0px; width: 10px;">
                <table style="color:white;background-color: #efefef;padding: 10px 0px 0px 0px;margin-left: 10px;" width="" align="right" border="0" cellpadding="0" cellspacing="0">
                    <tbody>
                        <tr>
                            <td bgcolor="#ed1c2e" style="
                                    text-align: center;
                                    padding-right: 20px;
                                    padding-top: 24px;
                                    width: 23px;
                                    background-color: white;
                                    ">
                            </td>
                        </tr>
                    </tbody>
                </table>
            </td>
        </tr>
    </tbody>
</table> 
</body>