title: Display CSS button in Outlook
body: <p>I created a CSS gradient button with <a href="http://css-tricks.com/examples/ButtonMaker/" rel="nofollow">Button Maker</a> 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.</p>
  
  <p>My problem:<a href="http://attitudeasbl.webs.com/btn.png" rel="nofollow">my button in outlook</a></p>
  
  <p>My button code:</p>
  
  <pre><code>&lt;span class="buttoncustom" style="background-color:#65a9d7"&gt;&lt;a href="http://www.google.com" target="_blank" title="Button" style="text-decoration:none;color:#FFFFFF; padding:5px;background-color:#65a9d7"&gt;&lt;strong&gt;&amp;#62; My Button&lt;/strong&gt;&lt;/a&gt;&lt;/span&gt;
  </code></pre>
  
  <p>My stylesheet:</p>
  
  <pre><code>&lt;style type="text/css"&gt;
          .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;
             }
      &lt;/style&gt;
  </code></pre>
  
  <p>I've been playing around with the code for ages to no avail so I'd appreciate your help enormously!</p>