Place <a> over the border ? Mail Newsletter - html

Question

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

Answer 1

Update
Okay so i didn't see the image because I'm an idiot.
So here is what I've done
I made the a position:relative
Then added the follwoing to the inline style:
border: white solid 10px;
bottom: -37px;
because your using outlook I'm doing things that i wouldn't recommend you use in real world css. There are better ways of doing things.
I then added the following to your table:
margin-top: -30px;
This just moves it up in the air so it doesn't create such a big gap between text and button.
<table style="padding-left:28px;padding-right:27px;position: relative;" 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;">
<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;padding: 20px;">Example
xxxx</p>
<table style="
color:white;
padding-bottom: 0px;
" width="100%" border="0" cellpadding="0" cellspacing="0">
<tbody><tr>
<td align="center" valign="" style="padding:0px 0px 0px 0px;padding: -20px;position: relative;width: 100%;top: bottom;bottom: 20px;text-align: center;">
<a href="#" target="_blank" style="text-decoration:none;color:#ffffff;outline:none;width:90%;height:40px;border:none;padding-left:0px;padding-right:0px;font-size:16px;font-weight:700;text-align: center;background: #ed1c2e;display: block;position: absolute;border: white solid 10px;top: 0px;z-index: 200;left: 50%;transform: translateX(-50%);">See
more <i style=" font-size: 29px;
vertical-align: -5px;
font-style: normal;">➝</i>
</a>
</td>
</tr>
</tbody></table>
</td>
</tr>
</tbody></table>
OLD AWNSER
Ill be honest im not 100% sure what you want. I'm guessing its this?
What are you using max-height for?
Is this what you would like?
<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;">
<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; background: #ed1c2e; display: block">See
more <i style=" font-size: 29px;
vertical-align: -5px;
font-style: normal;">➝</i>
</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
All you were missing was display: block; In the a Tag.
If this isn't what you wanted please comment and ill adjust

Answer 2

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>