Search code examples
cssemailhtml-email

Workaround to position:absolute as it does not work well with email readers like Gmail

I'm happy with the result of the following button by using position:absolute:

<button style="height:90px; font-size:26px;  background-color: #4CAF50; width: auto ">
<a href="https://api.whatsapp.com/send?phone=0034644776771&text=¡Hola!" style="vertical-align:middle; color:white; text-decoration: none;"> <img style="height:80%;vertical-align:middle;" src="https://i.imgur.com/XcXLJBA.png">  <span style="position: absolute; font-size: 60%"> Need help?</span>  <span style="relative: absolute;"> Send WhatsApp </span></a></button>

Unfortunately, it seems position:absolute does not work well with Gmail. Gmail outputs:

Gmail output

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.

Any other idea to put "Need help?" on top of "Send WhatsApp"? Maybe a table inside the button is the best solution for html to send by email?

Solution

  • Use <br> and try reconfiguring the width of the button

    <button style="height:90px; font-size:26px;  background-color: #4CAF50; width: 300px ">
<a href="https://api.whatsapp.com/send?phone=0034644776771&text=¡Hola!" style="vertical-align:middle; color:white; text-decoration: none;"> <img style="height:80%;vertical-align:middle;" src="https://i.imgur.com/XcXLJBA.png" align="left">  <span style=" font-size: 60%"> Need help?</span> <br> <span style="margin-left:0px;"> Send WhatsApp </span></a></button>

    Another version adding to the style: text-align: left;

    <button style="height:90px; font-size:26px;  background-color: #4CAF50; width: 300px; text-align: left; ">
<a href="https://api.whatsapp.com/send?phone=0034644776771&text=¡Hola!" style="vertical-align:middle; color:white; text-decoration: none;"> <img style="height:80%;vertical-align:middle;" src="https://i.imgur.com/XcXLJBA.png" align="left"> <span style=" font-size: 60%"> &nbsp;Need help?</span> <br> <span style="margin-left:0px;"> &nbsp;Send WhatsApp </span></a></button>