mark mark - 2 months ago 9
HTML Question

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

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:

enter image description here

In Outlook:

enter image description here

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:

enter image description here

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

Answer

Will this work?

    <body style="background-color: white; font: normal 14px Verdana">
    Hello <br>
    <span 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: 20px solid blue;
      text-decoration: none;
      color: white;"
      href="http://www.google.com">ACTIVATE YOUR ACCOUNT</a>
    </span>
    <br> Good bye
    </body>

Comments