Still plugging away trying to refine our corporate newsletter, and I've bumped into an issue with hover buttons, where the change is exactly what I wanted, but on the hover the button jumps right by quite a distance, and I can't for the life of me work out why. It's probably something fairly simple that I have missed but I would really appreciate a second set of eyes looking over it. It's the 'more info' button by the way.

Many thanks!

Code below:


<!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="width=device-width, initial-scale=1.0">
<title>Newman Thomson September 2017 Newsletter</title>

<style type="text/css">
.hover-me-1 {transition:all 0.3s ease-in-out !important;}
/* Adds transition effect when viewd in browser */
.hover-me-1:hover  {
background-color:#6a2c91 !important; 
color:#ffffff !important; 
border-radius:26px;
font-size:15px;
font-family:'Merriweather Sans', sans-serif;
text-align:center;
font-weight: 300;
padding-left:18px;
padding-right:18px;
}
/* Changes background color, text color, font size */

Rerun

a[x-apple-data-detectors] {
color: inherit !important;
text-decoration: none !important;
font-size: inherit !important;
font-family: inherit !important;
font-weight: inherit !important;
line-height: inherit !important;
}
/* Client-specific Styles */
#outlook a {padding:0;} /* Force Outlook to provide a "view in browser" menu link. */
body{width:100% !important; -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; margin:0; padding:0;}
/* Prevent Webkit and Windows Mobile platforms from changing default font sizes, while not breaking desktop design. */
.ExternalClass {width:100%;} /* Force Hotmail to display emails at full width */
.ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div {line-height: 100%;} /* Force Hotmail to display normal line spacing.  More on that: http://www.emailonacid.com/forum/viewthread/43/ */
#backgroundTable {margin:0; padding:0; width:100% !important; line-height: 100% !important;}
img {outline:none; text-decoration:none;border:none; -ms-interpolation-mode: bicubic;}
a img {border:none;}
.image_fix {display:block;}
p {
margin: 0px 0px !important;
color: #7e8082;
}
table td {border-collapse: collapse;}
table { border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; }
/*a {color: #e95353;text-decoration: none;text-decoration:none!important;}*/
/*STYLES*/
table[class=full] { width: 100%; clear: both;}
/*################################################*/
/*IPAD STYLES*/
/*################################################*/
@media only screen and (max-width: 640px) {
a[href^="tel"], a[href^="sms"] {
text-decoration: none;
color: #ffffff; /* or whatever your want */
cursor: default;
}
.mobile_link a[href^="tel"], .mobile_link a[href^="sms"] {
text-decoration: default;
color: #ffffff !important;
pointer-events: auto;
cursor: default;
}
table[class=devicewidth] {width: 440px!important;text-align:center!important;}
table[class=devicewidthinner] {width: 420px!important;text-align:center!important;}
table[class="sthide"]{display: none!important;}
img[class="bigimage"]{width: 420px!important;height:auto !important;}
img[class="col2img"]{width: 420px!important;height:auto !important;}
img[class="image-banner"]{width: 440px!important;height:auto !important;}
td[class="menu"]{text-align:center !important; padding: 0 0 10px 0 !important;}
td[class="logo"]{padding:10px 0 5px 0!important;margin: 0 auto !important;}
img[class="logo"]{padding:0!important;margin: 0 auto !important;}
img[class="spacinglines"]{width: 420px!important;}
}
/*##############################################*/
/*IPHONE STYLES*/
/*##############################################*/
@media only screen and (max-width: 480px) {
a[href^="tel"], a[href^="sms"] {
text-decoration: none;
color: #ffffff; /* or whatever your want */
cursor: default;
}
.mobile_link a[href^="tel"], .mobile_link a[href^="sms"] {
text-decoration: default;
color: #ffffff !important; 
pointer-events: auto;
cursor: default;
}
table[class=devicewidth] {width: 280px!important;text-align:center!important;}
table[class=devicewidthinner] {width: 260px!important;text-align:center!important;}
table[class="sthide"]{display: none!important;}
img[class="bigimage"]{width: 260px!important;height:auto!important;}
img[class="col2img"]{width: 260px!important;height:auto!important;}
img[class="image-banner"]{width: 280px!important;height:auto!important;}
img[class="spacinglines"]{width: 260px!important;}
}
</style>
<link href="https://fonts.googleapis.com/css?family=Merriweather+Sans" rel="stylesheet"> 
</head>
<!-- start of header -->
<body>
<div class="block">
<table width="100%" bgcolor="#f6f4f5" cellpadding="0" cellspacing="0" border="0" id="backgroundTable" st-sortable="header">
<tbody>
<tr>
<td bgcolor="#7e8082">
<table width="580" bgcolor="#ffffff" cellpadding="0" cellspacing="0" border="0" class="devicewidth" hlitebg="edit" shadow="edit" align="center">
<tbody>
<tr>
<td valign="middle">
<!-- logo -->
<table width="280" cellpadding="0" cellspacing="0" border="0" align="left" class="devicewidth">
<tbody>
<tr>
<td valign="middle" width="270" style="padding: 10px 0 10px 20px;" class="logo">
<div class="imgpop">
<a href="http://newmanthomson.com/?utm_source=newsletter&amp;utm_campaign=june_17&amp;utm_medium=email&amp;utm_content=home_logo" target="_blank"><img src="https://gallery.mailchimp.com/a22dc184b5eaa0ddb904efa3d/images/84d423d2-388c-45b2-b1dc-ba979d055def.png?_ga=1.69756627.258004978.1486471473" alt="logo" width="242" height="74" class="logo" style="display:block; border:none; outline:none; text-decoration:none;" border="0" st-image="edit"></a>
</div>
</td>
</tr>
</tbody>
</table>
<p>
<!-- End of logo -->
<!-- menu -->
</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<table width="280" cellpadding="0" cellspacing="0" border="0" align="right" class="devicewidth">
<tbody>
<tr>
<td width="270" valign="middle" style="font-family: 'Merriweather Sans', sans-serif;
font-size: 14px; color: #6a2c91; line-height: 24px; padding: 10px 0;" align="right" class="menu" st-content="menu">
<a href="http://newmanthomson.com/?utm_source=newsletter&amp;utm_campaign=june_17&amp;utm_medium=email&amp;utm_content=home_text" target="_blank" style="text-decoration: none; color: #6a2c91; font-family: 'Merriweather Sans', sans-serif;
">HOME</a>
&nbsp;|&nbsp;
<a href="http://newmanthomson.com/portfolio?utm_source=newsletter&amp;utm_campaign=june_17&amp;utm_medium=email&amp;utm_content=portfolio_text" target="_blank" style="text-decoration: none; color: #6a2c91; font-family: 'Merriweather Sans', sans-serif;
">PORTFOLIO</a>
&nbsp;|&nbsp;
<a href="http://newmanthomson.com/contact-us?utm_source=newsletter&amp;utm_campaign=june_17&amp;utm_medium=email&amp;utm_content=contact_text" target="_blank" style="text-decoration: none; color: #6a2c91; font-family: 'Merriweather Sans', sans-serif;
">CONTACT</a>
</td>
<td width="20"></td>
</tr>
</tbody>
</table>
<!-- End of Menu -->
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
<!-- end of header -->
<!-- image + text -->
<div class="block">
<table width="100%" bgcolor="#f6f4f5" cellpadding="0" cellspacing="0" border="0" id="backgroundTable" st-sortable="bigimage">
<tbody>
<tr>
<td bgcolor="#7e8082">
<table align="center" bgcolor="#ffffff" width="580" cellspacing="0" cellpadding="0" border="0" class="devicewidth" modulebg="edit">
<tbody>
<tr>
<td width="100%" height="20"></td>
</tr>
<tr>
<td>
<table width="540" align="center" cellspacing="0" cellpadding="0" border="0" class="devicewidthinner">
<tr>
<td style="font-family: 'Merriweather Sans', sans-serif;
font-size: 18px; color: #6a2c91; text-align: left; line-height: 24px;" st-title="rightimage-title">Hello *|FNAME|*,</td>
</tr>
<tr>
<td height="20"></td>
</tr>
<tr>
<td style="font-family: 'Merriweather Sans', sans-serif;
font-size: 14px; color: #7e8082; text-align: left; line-height: 24px;" st-content="rightimage-paragraph"> <p>So you all know we print on paper, but what else can we print on?</p>
<p>&nbsp;</p>
<p>Obviously printing on paper is our bread and butter, but there are a lot of other 'substrates' (the posh word for the material we print on) and products that we can print on.</p>
<p><br />
We can print onto  materials such as Synaps, which is not only waterproof, it's tearproof, and resistant to UV. We can print onto magnetic materials, display boards such as foamex or diebond, outdoor banners, pull up banners, self cling materials and much more. Have a look below to find out more information. </p>
<p><br />
This month we also focus on Insite, our online artwork portal. Whilst some of you may be familiar with with Insite and already use it, some others might not. We take a look at it to show you what the advantages are.</p>
<p><br />
Thanks,  </p>
<p><img src="https://gallery.mailchimp.com/a22dc184b5eaa0ddb904efa3d/images/4568ce51-40b3-4ac5-a7a8-2ec65c832fc6.jpg" width="125" height="65" alt="James Sig"/></p>
<p>James (Marketing - Newman Thomson)</p></td>
</tr>
<tbody>
<tr>
<td align="center">&nbsp;</td>
</tr>
<tr>
<td align="center"><span style="font-size:1px; line-height:1px; mso-line-height-rule: exactly;"><img src="https://gallery.mailchimp.com/a22dc184b5eaa0ddb904efa3d/images/313dbed2-d853-4ca4-8180-321d3e5a5dae.png?_ga=1.61886063.258004978.1486471473" alt="spacing line" border="0" style="display:block; border:none; outline:none; text-decoration:none;" class="spacinglines"></span></td>
</tr>
<tr>
<td align="center">&nbsp;</td>
</tr>
<!-- start of image -->
<tr>
<td align="center">
<a target="_blank" href="https://www.youtube.com/watch?v=98TT1EdyTiQ"><img width="540" border="0" height="305" alt="die cutting" style="display:block; border:none; outline:none; text-decoration:none;" src="https://gallery.mailchimp.com/a22dc184b5eaa0ddb904efa3d/images/455a34c1-c9e3-4106-8024-74e841f2f414.jpg" class="bigimage"></a>
</td>
</tr>
<!-- end of image -->
<!-- End of Image + Text -->
<!-- Spacing -->
<tr>
<td width="100%" height="20"></td>
</tr>
<!-- Spacing -->
<!-- title -->
<tr>
<td style="font-family: 'Merriweather Sans', sans-serif;
font-size: 18px; color: #6a2c91; text-align: left; line-height: 24px;" st-title="rightimage-title">BIG Printing!</td>
</tr>
<!-- end of title -->
<!-- Spacing -->
<tr>
<td width="100%" height="20"></td>
</tr>
<!-- Spacing -->
<!-- content -->
<tr>
  <td style="font-family: 'Merriweather Sans', sans-serif;
font-size: 14px; color: #7e8082; text-align: left; line-height: 24px;" st-content="rightimage-paragraph"><p>As we mentioned above, there's more to us than just ink on paper. We put ink on a lot of things. Some of them are really quite big things too. Rollers banners, for example which we offer a range of 4 different variations of, really good quality ones, starting from <b> £50 each.</b></p></td>
</tr>
<!-- end of content -->
<!-- Spacing -->
<tr>
<td width="100%" height="20"></td>
</tr>
<!-- End of Spacing -->
</tbody></table>
</td>
</tr>
</tbody></table>
</td>
</tr>
</tbody>
</table>
</div>
<!-- start of spacing line div -->
<div class="block">
<table width="100%" bgcolor="#f6f4f5" cellpadding="0" cellspacing="0" border="0" id="backgroundTable" st-sortable="fulltext">
<tbody>
<tr>
<td bgcolor="#7e8082">
<table bgcolor="#ffffff" width="580" cellpadding="0" cellspacing="0" border="0" align="center" class="devicewidth" modulebg="edit">
<tbody>
<tr>
<td>
<table width="540" align="center" cellpadding="0" cellspacing="0" border="0" class="devicewidthinner">
<tbody>
<tr>
<td width="100%" height="15" align="center" style="font-size:1px; line-height:1px; mso-line-height-rule: exactly;">
<img src="https://gallery.mailchimp.com/a22dc184b5eaa0ddb904efa3d/images/313dbed2-d853-4ca4-8180-321d3e5a5dae.png?_ga=1.61886063.258004978.1486471473" alt="spacing line" border="0" style="display:block; border:none; outline:none; text-decoration:none;" class="spacinglines">
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
<!-- end of spacing line div -->
<!-- start of left image -->
<div class="block">
<!-- start of left image -->
<table width="100%" bgcolor="#f6f4f5" cellpadding="0" cellspacing="0" border="0" id="backgroundTable" st-sortable="leftimage">
<tbody>
<tr>
<td bgcolor="#7e8082">
<table bgcolor="#ffffff" width="580" cellpadding="0" cellspacing="0" border="0" align="center" class="devicewidth" modulebg="edit">
<tbody>
<!-- Spacing -->
<tr>
<td height="20"></td>
</tr>
<!-- Spacing -->
<tr>
<td>
<table width="540" align="center" border="0" cellpadding="0" cellspacing="0" class="devicewidthinner">
<tbody>
<tr>
<td>
<!-- start of text content table -->
<table width="200" align="left" border="0" cellpadding="0" cellspacing="0" class="devicewidthinner">
<tbody>
<!-- image -->
<tr>
<td width="200" height="180" align="center"><a href="http://newmanthomson.com/products/pull-banners#neo?utm_source=newsletter&amp;utm_campaign=march_17&amp;utm_medium=email&amp;utm_content=roller_banner" target="_blank"><img src="https://gallery.mailchimp.com/a22dc184b5eaa0ddb904efa3d/images/b1cffa7e-25ed-4312-986e-dedc3b02a1d0.jpg?_ga=1.27159678.258004978.1486471473?_ga=1.27675775.258004978.1486471473" alt="" border="0" width="200" height="300" style="display:block; border:none; outline:none; text-decoration:none;"></a>
</td>
</tr>
</tbody>
</table>
<!-- mobile spacing -->
<table align="left" border="0" cellpadding="0" cellspacing="0" class="mobilespacing">
<tbody>
<tr>
<td width="100%" height="15" style="font-size:1px; line-height:1px; mso-line-height-rule: exactly;">&nbsp;</td>
</tr>
</tbody>
</table>
<!-- mobile spacing -->
<!-- start of right column -->
<table width="330" align="right" border="0" cellpadding="0" cellspacing="0" class="devicewidthinner">
<tbody>
<!-- title -->
<tr>
<td style="font-family: 'Merriweather Sans', sans-serif;
 font-size: 18px; color: #6a2c91; text-align: left; line-height: 20px;" st-title="leftimage-title">Neo Roller Banner - from £50.00</td>
</tr>
<!-- end of title -->
<!-- Spacing -->
<tr>
<td width="100%" height="20"></td>
</tr>
<!-- Spacing -->
<!-- content -->
<tr>
<td style="font-family: 'Merriweather Sans', sans-serif;
font-size: 14px; color: #7e8082; text-align: left; line-height: 24px;" st-content="leftimage-paragraph">Our entry level roller banner, available in two widths.<br>
<ul>
<li>Single sided </li>
<li>800 &amp; 850mm widths available</li>
<li>Visible height 2000mm</li>
<li>Padded bag </li>
<li>Artwork guide available <a href="http://newmanthomson.com/files/resources/Pull-up_banners_template_neo.pdf?utm_source=newsletter&amp;utm_campaign=march_17&amp;utm_medium=email&amp;utm_content=neo_template" target="_blank" style="color: #6a2c91">here</a></li>
</ul></td>
</tr>
<!-- end of content -->
<!-- Spacing -->
<tr>
<td width="100%" height="10"></td>
</tr>
<tr>
<td>
<table height="30" align="left" valign="middle" border="0" cellpadding="0" cellspacing="0" st-button="edit">
<tbody>
<tr>
</tr>
</tbody>
</table>
<!-- BULLETPROOF BUTTON -->
<table border="0" cellspacing="0" cellpadding="0" valign="middle">
<tr>
<td width="123" height="30" bgcolor="#ffffff" align="center"
style=
"
border-radius:26px;
font-family: 'Merriweather Sans', sans-serif;  
font-size:13px; 
color:#6a2c91; 
display:block;
vertical-align:middle;
font-weight:300; 
-webkit-text-size-adjust: none;
border:2px solid #6a2c91;
padding-left:18px; padding-right:18px;
">
<font face="'Merriweather Sans', sans-serif">
<a class="hover-me-1" href="http://newmanthomson.com/products/pull-banners#neo?utm_source=newsletter&amp;utm_campaign=march_17&amp;utm_medium=email&amp;utm_content=roller_banner" target="_blank" style="color:#6a2c91; text-decoration:none; display:inline-block; width:100%; line-height:30px">More Info &rarr;</a>
</font>
</td>
</tr>
</table>
<!-- BULLETPROOF BUTTON --></td>
</tr>
</tbody>
</table>
<!-- end of right column -->
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<!-- Spacing -->
<tr>
<td height="20"></td>
</tr>
<!-- Spacing -->
</tbody>
</table>