CODEWITHSUNDEEP
htmlcssbuttonoutlooknewsletter
user2000334
user2000334

Reputation: 21

Display CSS button in Outlook

I created a CSS gradient button with Button Maker but it doesn't display properly in Outlook given their CSS restrictions. I therefore want to have a more simple looking button displayed in Outlook but I haven't managed to fill the background between my border and the text link (5px padding around text needs to be filled). I specified background-color:#65a9d7 both in the span style and in the link style.

My problem:my button in outlook

My button code:

<span class="buttoncustom" style="background-color:#65a9d7"><a href="http://www.google.com" target="_blank" title="Button" style="text-decoration:none;color:#FFFFFF; padding:5px;background-color:#65a9d7"><strong>&#62; My Button</strong></a></span>

My stylesheet:

<style type="text/css">
        .buttoncustom {
           border-top: 1px solid #96d1f8;
           background: #65a9d7;
           background: -webkit-gradient(linear, left top, left bottom, from(#3e779d), to(#65a9d7));
           background: -webkit-linear-gradient(top, #3e779d, #65a9d7);
           background: -moz-linear-gradient(top, #3e779d, #65a9d7);
           background: -ms-linear-gradient(top, #3e779d, #65a9d7);
           background: -o-linear-gradient(top, #3e779d, #65a9d7);
           padding: 5px 10px;
           -webkit-border-radius: 8px;
           -moz-border-radius: 8px;
           border-radius: 8px;
           -webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;
           -moz-box-shadow: rgba(0,0,0,1) 0 1px 0;
           box-shadow: rgba(0,0,0,1) 0 1px 0;
           text-shadow: rgba(0,0,0,.4) 0 1px 0;
           color: white;
           font-size: 14px;
           font-family: Georgia, serif;
           text-decoration: none;
           vertical-align: middle;
           mso-line-height-rule: exactly;
           }
        .buttoncustom:hover {
           border-top-color: #006699;
           background: #006699;
           color: #ccc;
           }
        .buttoncustom:active {
           border-top-color: #1b435e;
           background: #1b435e;
           }
    </style>

I've been playing around with the code for ages to no avail so I'd appreciate your help enormously!

Upvotes: 2

Views: 33784

Answers (6)

Neha Sharma
Neha Sharma

Reputation: 31

Please use below mentioned HTML code this works perfectly well in outlook.

<table cellpadding="0" align="left" cellspacing="0" style="border-radius:2px; background-color:#5794FF; color:#FFFFFF">
    <tbody>
        <tr>
            <td align="center" height="32" style="padding:0px 19px; height:32px; font-size:14px; line-height:12px">
                <a href="https://www.google.co.in/" target="_blank" style="text-decoration:none; color:#FFFFFF">Search Google</a>
            </td>
        </tr>
    </tbody>
</table>

Upvotes: 2

Fox
Fox

Reputation: 481

Litmus has a great blog post on various options and support for this. I typically use Padding + Border option. I find that it works in all the major clients (except lotus notes).

https://litmus.com/blog/a-guide-to-bulletproof-buttons-in-email-design

Note: when testing you need a proper url in the link, if you just have a hash in there it wont work in outlook.com because they strip the link out!

Upvotes: 2

John
John

Reputation: 12193

See Campaign Monitor's tool for making bulletproof buttons in email. Uses VML for Outlook with a fallback display for when images are turned off:

buttons.cm

Upvotes: 5

gillytech
gillytech

Reputation: 3686

As other answers suggest, the support for anything really universal in Outlook 2007, 2010 and 2013 is pretty terrible. The main problem in the case of this button is that the margin property is not supported in these versions of Outlook (they use MS Word as the rendering engine, yuk!) Litmus explains this and the solution very well.

I managed to create an HTML table-based button that will work in almost all major email clients.

Here is the HTML for your reference:

<table cellpadding="0" cellmargin="0" border="0" height="44" width="178" style="border-collapse: collapse; border:5px solid #c62228">
  <tr>
    <td bgcolor="#c62228" valign="middle" align="center" width="174">
      <div style="font-size: 18px; color: #ffffff; line-height: 1; margin: 0; padding: 0; mso-table-lspace:0; mso-table-rspace:0;">
        <a href="#" style="text-decoration: none; color: #ffffff; border: 0; font-family: Arial, arial, sans-serif; mso-table-lspace:0; mso-table-rspace:0;" border="0">MY BUTTON</a>
      </div>
    </td>
  </tr>
</table>

Hope this is still helpful to you or any googler that happens by.

Upvotes: 6

Phil
Phil

Reputation: 1071

I find that using a border of the same colour as the button background is a reliable workaround. So instead of this:

a.button { background: #dddddd; padding: 8px; }

Try this:

a.button { background: #dddddd; border: 8px solid #dddddd; }

Upvotes: 6

Sebastian vom Meer
Sebastian vom Meer

Reputation: 5251

Have you tried to style the anchor directly?

.buttoncustom a {
       border: 1px solid #96d1f8;
       background: #65a9d7;
       padding: 5px 10px;
}

Upvotes: -1

Related Questions