Bulletproof ghost button – no VML, no tables

You can also do a ghost button using the border button hack you also listed by using transparent borders, then outline for the border. But you will loose the border-radius :(

<a href="#" style="border:10px solid transparent;outline:2px solid #556270;border-width:10px 30px;color:#556270; text-decoration:none;font-family: sans-serif;">Click me NOW!</a>

(rough code)

This would be completely bulletproof if the button background color filled the entire button in Outlook 2007 and 2010.

When you guys say bulletproof, what do you mean by that?

I tested your code Stig (I'm also using your button generator, thanks for that). I also tested the modified code from Mohammed but there are so many clients where the button doesn't work that we can hardly say it's bulletproof.

For me something bulletproof is something that works across all email clients, browsers and devices - I know hardly anything works that way with email...

Hi,

I had a play around with @Stig Morten Myre's code. I found it wasnt rendering in Gmail the way it should have.

<style type="text/css">
  .btn a {
    border: 2px solid #556270;
    border-radius: 4px;
    color: #556270;
    display: inline-block;
    font-family: sans-serif;
    font-size: 14px;
    font-weight: bold;
    line-height: 20px;
    padding: 10px 20px;
    text-align: center;
    text-decoration: none;
    transition: all 0.2s ease-in;
  }

* [lang=x-btn] a {
    border: 2px solid #556270;
    border-radius: 4px;
    color: #556270;
    display: inline-block;
    font-family: sans-serif;
    font-size: 14px;
    font-weight: bold;
    line-height: 20px;
    padding: 10px 20px;
    text-align: center;
    text-decoration: none;
    transition: all 0.2s ease-in;
  }

  .btn a:hover,
  * [lang=x-btn] a:hover {
    border-color: #3f4953 !important;
    color: #3f4953 !important;
  }
</style>

<div class="btn" lang="x-btn">
  <a href="#">
    Click here or else
  </a>
</div>

After running it thru inliner it worked like a charm. Just separated the '.btn a' into a seperate class with lang=x.

Litmus tested but cant see it working on Outlook 365

Cheers

Did you check it in Gmail on Android?

I like that this doesn't actually involve any hacks, other than Justin's :hover selector for Gmail.

This is not "bulletproof."

Padding for p, div and a tags is not supported in Outlook 2007/10/13, per this table of CSS Support for popular email clients: https://www.campaignmonitor.com/css/