title: Workaround to position:absolute as it does not work well with email readers like Gmail
body: <p>I'm happy with the result of the following button by using <code>position:absolute</code>:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;button style="height:90px; font-size:26px;  background-color: #4CAF50; width: auto "&gt;
  &lt;a href="https://api.whatsapp.com/send?phone=0034644776771&amp;text=¡Hola!" style="vertical-align:middle; color:white; text-decoration: none;"&gt; &lt;img style="height:80%;vertical-align:middle;" src="https://i.imgur.com/XcXLJBA.png"&gt;  &lt;span style="position: absolute; font-size: 60%"&gt; Need help?&lt;/span&gt;  &lt;span style="relative: absolute;"&gt; Send WhatsApp &lt;/span&gt;&lt;/a&gt;&lt;/button&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>Unfortunately, it seems <code>position:absolute</code> <a href="https://stackoverflow.com/a/3403216/1198404">does not work well with Gmail</a>. Gmail outputs:</p>
  <p><a href="https://i.stack.imgur.com/xcp0H.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/xcp0H.png" alt="Gmail output" /></a></p>
  <p>I'm run out ideas. Well actually I'm thinking on a table within the button, but it doesn't seem a good idea because it sounds weird to me.</p>
  <p>Any other idea to put &quot;Need help?&quot; on top of &quot;Send WhatsApp&quot;? Maybe a table inside the button is the best solution for html to send by email?</p>