Horizontally Align Multiple CTA Buttons
- July 8, 2019
- 3 replies
- 4712 views
Without changing the text to force the alignment, how can I horizontally align the 3 CTA buttons I have in 3 columns at the bottom of my email?
<p class="h2" style="font-size: 15px; line-height: 18px; color: #7c858d; margin: 0 0 8px 0;"><strong><span style="font-size: 16px;">Newsletter</span></strong></p>
<p align="center" style="text-align: center; line-height: 14.25pt; margin: 0cm 0cm 9.75pt 0cm;">Murata innovations and news</p>
<table class="buttonwrapper" cellpadding="0" cellspacing="0" border="0" align="center" style="border-radius: 4px; -webkit-border-radius: 4px; font-size: 14px; font-weight: bold; line-height: 16px; text-align: center; width: 100%; background-color: #f5002f;">
<tbody>
<tr>
<td class="button type" style="font-family: verdana,sans-serif;"><a href="https://www.murata.com/en-us/products/newsletter" style="border-radius: 4px; -webkit-border-radius: 4px; color: #ffffff; display: inline-block; text-decoration: none; border-width: 10px 8px 10px 8px; border-color: #f5002f; border-style: solid;" target="_blank">Subscribe</a></td>
</tr>
</tbody>
</table>
<p class="h2" style="font-size: 15px; line-height: 18px; color: #7c858d; margin: 0 0 8px 0;"><b>Murata technologies</b></p>
<p style="margin: 0 0 13px 0;"><span style="font-size: 9.5pt; line-height: 115%; font-family: verdana, geneva; color: #666666;">View our product lineup</span></p>
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td align="center">
<table class="buttonwrapper" cellpadding="0" cellspacing="0" border="0" align="center" style="border-radius: 4px; -webkit-border-radius: 4px; font-size: 14px; font-weight: bold; line-height: 16px; text-align: center; width: 100%; background-color: #f5002f;">
<tbody>
<tr>
<td class="button type" style="font-family: verdana,sans-serif;"><a href="https://www.murata.com/en-us/products?intcid5=com" style="border-radius: 4px; -webkit-border-radius: 4px; color: #ffffff; display: inline-block; text-decoration: none; border-width: 10px 8px 10px 8px; border-color: #f5002f; border-style: solid;" target="_blank">Products</a></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<p class="h2" style="font-size: 15px; line-height: 18px; color: #7c858d; margin: 0 0 8px 0;"><b>Submit inquiry</b></p>
<p style="margin: 0 0 13px 0;">Request quotation, samples, tech support</p>
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td align="center">
<table class="buttonwrapper" cellpadding="0" cellspacing="0" border="0" align="center" style="border-radius: 4px; -webkit-border-radius: 4px; font-size: 14px; font-weight: bold; line-height: 16px; text-align: center; width: 100%; background-color: #f5002f;">
<tbody>
<tr>
<td class="button type" style="font-family: verdana,sans-serif;"><a href="https://www.murata.com/en-us/contactform" style="border-radius: 4px; -webkit-border-radius: 4px; color: #ffffff; display: inline-block; text-decoration: none; border-width: 10px 8px 10px 8px; border-color: #f5002f; border-style: solid;" target="_blank">Contact us</a></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>