How to style a hyper link as a button with padding without images so that it renders correctly in Outlook?

Question

I have the following simple HTML - https://jsfiddle.net/mark69_fnd/6g0L0jwc/

<body style="background-color: white; font: normal 14px Verdana">
Hello
<p></p>
<a style="
  font: bold 11px;
  text-decoration: none;
  background-color: blue;
  padding: 10px;
  color: white;
  border-top: 1px solid #CCCCCC;
  border-right: 1px solid #333333;
  border-bottom: 1px solid #333333;
  border-left: 1px solid #CCCCCC;"
  href="http://www.google.com">ACTIVATE YOUR ACCOUNT</a>
<p></p>
Good bye
</body>

Now I am trying to see how it is rendered when emailed using the service at https://putsmail.com.

In gmail:

In Outlook:

Is it possible to change the HTML code in a way that Outlook displays the button with padding, like Gmail does?

Unfortunately, I cannot use images, but everything else is fine.

EDIT 1

LGSon's answer

<body style="background-color: white; font: normal 14px Verdana">
Hello <br>
<div style="display: inline-block;
  border-top: 1px solid #CCCCCC;
  border-right: 1px solid #333333;
  border-bottom: 1px solid #333333;
  border-left: 1px solid #CCCCCC;">
  <a style="display: inline-block;
  font: bold 11px;
  background-color: blue;
  border: 10px solid blue;
  text-decoration: none;
  color: white;"
  href="http://www.google.com">ACTIVATE YOUR ACCOUNT</a>
</div>
<br> Good bye
</body>

generates the following result in Outlook:

Which is pretty close to what I need, but the white bar stretching along the page is in the way.

maybe try a display: inline-block or display: block as well? — Theodoros Klikas, Sep 19 '16 at 21:14
Is this post a dupe maybe? ..http://stackoverflow.com/questions/21474239/css-padding-is-not-working-in-outlook — Asons, Sep 19 '16 at 21:28
It is not a dupe. I need a hyperlink styled as a button with padding without images. The details matter. — mark, Sep 19 '16 at 21:39
Did you try this? https://litmus.com/blog/a-guide-to-bulletproof-buttons-in-email-design They create buttons for email using tables. — Dominofoe, Sep 19 '16 at 22:07
This is an HTML email template designed specifically for HTML email. https://github.com/rodriguezcommaj/salted — Dominofoe, Sep 19 '16 at 22:15

Asons · Accepted Answer · 2016-09-19T23:18:21.700

2

Will this work?

<body style="background-color: white; font: normal 14px Verdana">
    Hello <br>
    <a style="display: inline-block;
      font: bold 11px;
      background-color: blue;
      border: 20px solid blue;
      text-decoration: none;
      color: white;"
      href="http://www.google.com">ACTIVATE YOUR ACCOUNT</a>
    <br> Good bye
    </body>

edited Sep 19 '16 at 23:18

answered Sep 19 '16 at 21:44

Asons

84,923
12
110
165

@mark Changed to `span` and increase border to 20, will that work in Outlook? (don't have outlook so can't test myself) – Asons Sep 19 '16 at 22:03
@mark Perfect, and good to know when I want something similair :) – Asons Sep 19 '16 at 22:34
Actually, there is a problem now with the Gmail client :-(. It does not recognize the hyperlink ... Oh my... – mark Sep 19 '16 at 22:56
@mark Oh my ... me too :) ... What if you just drop the `span`, will that work? ... It only add the 1px border, which one can barely see anyway ... if not, you'll need to revert to classical table/cells – Asons Sep 19 '16 at 22:59
Works without the span in both GMail and Outlook. Please, update your answer. – mark Sep 19 '16 at 23:17

How to style a hyper link as a button with padding without images so that it renders correctly in Outlook?

1 Answers1