CODEWITHSUNDEEP
htmlemailoutlook
mark
mark

Reputation: 62722

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.

Upvotes: 1

Views: 134

Answers (1)

Asons
Asons

Reputation: 87191

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>

Upvotes: 2

Related Questions