How do I remove link underlining in my HTML email?

Answer 1

To completely "hide" underline for <a> in both mail application and web browser, can do the following tricky way.

<a href="..."><div style="background-color:red;">
    <span style="color:red; text-decoration:underline;"><span style="color:white;">BUTTON</span></span>
</div></a>

1. Color in 1st <span> is the one you don't need, MUST set as same as your background color. (red in here)

2. Color in 2nd <span> is the one for your button text. (white in here)

Answer 2

Code like the lines below worked for me in Gmail Web client. A non-underlined black link showed up in the email. I didn't use the nested span tag.

<table>
  <tbody>
    <tr>
        <td>
            <a href="http://hexinpeter.com" style="text-decoration: none; color: #000000 !important;">Peter Blog</a>
        </td>
    </tr>
  </tbody>
</table>

Note: Gmail will strip off any incorrect inline styles. E.g. code like the line below will have its inline styles all stripped off.

<a href="http://hexinpeter.com" style="font-family:; text-decoration: none; color: #000000 !important;">Peter Blog</a>

Answer 3

You should write something like this.

<a href="#" style="text-decoration:none;">BOOK NOW</a>

Answer 4

All you have to do is:

<a href="" style="text-decoration:#none; letter-spacing: -999px;">

Answer 5

Use !important in the text decoration rule.

<a href="#" style="text-decoration:none !important;">BOOK NOW</a>