在Outlook中顯示CSS按鈕

我創建了一個帶有Button Maker的CSS漸變按鈕，但在Outlook中給定其CSS限制時無法正確顯示。因此，我希望在Outlook中顯示一個更簡單的外觀按鈕，但我沒有設法填充我的邊框和文本鏈接之間的背景（需要填充文本的5px填充）。我在span style和link style中都指定了background-color：＃65a9d7。在Outlook中顯示CSS按鈕

我的問題：my button in outlook

我的按鈕代碼：

<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>

我的樣式表：

<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>

我已經用代碼玩弄了好半天也沒有用，所以我」 d非常感謝您的幫助！

來源

2013-01-22 user2000334

您是否嘗試過直接設置錨點的樣式？

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

來源

2013-01-22 13:34:24

請參閱Campaign Monitor的用於在電子郵件中製作防彈按鈕的工具。使用VML對Outlook使用備用顯示圖像時被關閉的情況：

buttons.cm

來源

2013-01-22 16:09:56 John

我發現，使用相同顏色的按鈕背景的邊界是一個可靠的解決方法。因此，而不是這樣的：

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

試試這個：

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

來源

2013-07-18 14:48:27 Phil

至於其他的答案表明，任何東西，在Outlook 2007，2010和2013年真正普及的支持是非常可怕的。這個按鈕的主要問題是這些版本的Outlook不支持邊距屬性（它們使用MS Word作爲渲染引擎，yuk！）Litmus explains this and the solution very well。

我設法創建了一個HTML table-based button，它幾乎可以在所有主要的電子郵件客戶端中使用。

這裏是供您參考HTML：

<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>

希望這仍然是對您有所幫助或發生任何Google員工。

來源

2014-04-01 00:48:35 gillytech

它看起來不錯，但這個問題是按鈕本身不可點擊。只是文字。 – dbinott

這是行得通的。謝謝。無論如何，使它有一個邊界半徑？ – Si8

@ Si8不客氣。不幸的是，在Outlook中實現這種效果的唯一方法是在表格矩陣的每個角落添加圓角圖像。我發現讓按鈕變成圖像更容易，或者讓角落按照微軟上帝的意願排列。 – gillytech

石蕊有一個偉大的博客文章的各種選項和支持。我通常使用填充+邊框選項。我發現它適用於所有主要客戶（蓮花筆記除外）。

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

注：測試時，你需要一個正確的URL中的鏈接，如果你只是有一個哈希在那裏它不會工作在outlook.com，因爲它們剝離出來的鏈接！

來源

2016-01-28 04:01:56 Fox

在Outlook中顯示CSS按鈕

回答

相關問題