Button 100% width, is this the best way?

[adelriosantiago]

What is the best way to make the button 100% width?

I did:

<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: separate;mso-table-lspace: 0pt;mso-table-rspace: 0pt;width: 100%;">
  <tbody>
	<tr>
	  <td style="font-family: sans-serif; font-size: 14px; vertical-align: top; background-color: #3498db; border-radius: 5px; text-align: center;"> <a href="http://htmlemail.io" target="_blank" style="display: inline-block; color: #ffffff; background-color: #3498db; border: solid 1px #3498db; border-radius: 5px; box-sizing: border-box; cursor: pointer; text-decoration: none; font-size: 14px; font-weight: bold; margin: 0; padding: 12px 25px; text-transform: capitalize; border-color: #3498db;">Call To Action</a> </td>
	</tr>
  </tbody>
</table>

(Note the width: 100% in the first

element) And it looks fine,

Would this have any impact on Outlook/Gmail?

[leemunroe]

@adelriosantiago You probably need to add width: 100% to the <td> and <a> as well as the <table> to ensure the clickable button spans the full width (and not just the background color).

[adelriosantiago]

@leemunroe Yes, I noticed that. Thanks!

I was wondering why the button is currently not at width 100%. IMO it looks better. Is there some kind of rendering issue by keeping that at 100%?

[leemunroe]

@adelriosantiago Cool. Just subjective really. There's a media query to make it full width on small viewports. Keeping it not 100% gives you a bit more flexibility e.g. putting buttons side by side