CSS按鈕將不會呈現在電子郵件模板

我有一個使用CSS一個按鈕的電子郵件模板here。在大多數的郵件客戶端，該按鈕會出現就好（綠色漸變）。但是，在Gmail中，該按鈕不會顯示。CSS按鈕將不會呈現在電子郵件模板

見截圖（在Gmail中渲染）：

enter image description here

這裏是按鈕的代碼：

.button { 
     background-image: -webkit-linear-gradient(top, rgba(168,224,0,1) 0%,rgba(126,163,3,1) 50%); 
     background-image: -moz-linear-gradient(top, rgba(168,224,0,1) 0%,rgba(126,163,3,1) 50%); 
     background-image:  -ms-linear-gradient(top, rgba(168,224,0,1) 0%,rgba(126,163,3,1) 50%); 
     background-image:  -o-linear-gradient(top, rgba(168,224,0,1) 0%,rgba(126,163,3,1) 50%); 
     background-image:   linear-gradient(top, rgba(168,224,0,1) 0%,rgba(126,163,3,1) 50%); 
     -webkit-box-shadow: 0px 0px 0px 1px rgba(250,250,250,1)inset; 
      -moz-box-shadow: 0px 0px 0px 1px rgba(250,250,250,1)inset; 
       box-shadow: 0px 0px 0px 1px rgba(250,250,250,1)inset; 
     border: solid 1px rgba(112,112,112,1); 
     -webkit-border-radius: 3px; 
      -moz-border-radius: 3px; 
       border-radius: 3px; 
     width: 180px; 
     height: 44px; 
     padding: 0px 24px 0px 24px; 
     display: block; 
     font-size: 18px; 
     font-family: Arial, Sans-serif; 
     line-height: 40px; 
     text-align: center; 
     color: rgba(247,247,247,1) !important; 
     font-weight: bold; 
     margin: 0 auto; 
    } 

    a.button { 
     text-decoration: none !important; 
    } 

    .button:hover { 
     background-image: -webkit-linear-gradient(top, rgba(168,224,0,1) 0%,rgba(137,179,0,1) 50%); 
     background-image: -moz-linear-gradient(top, rgba(168,224,0,1) 0%,rgba(137,179,0,1) 50%); 
     background-image:  -ms-linear-gradient(top, rgba(168,224,0,1) 0%,rgba(137,179,0,1) 50%); 
     background-image:  -o-linear-gradient(top, rgba(168,224,0,1) 0%,rgba(137,179,0,1) 50%); 
     background-image:   linear-gradient(top, rgba(168,224,0,1) 0%,rgba(137,179,0,1) 50%); 
     -webkit-box-shadow: 0px 0px 0px 1px rgba(239,249,254,1)inset; 
      -moz-box-shadow: 0px 0px 0px 1px rgba(239,249,254,1)inset; 
       box-shadow: 0px 0px 0px 1px rgba(239,249,254,1)inset; 
     border: solid 1px rgba(179,179,179,1); 
    } 
    .button:active { 
     -webkit-box-shadow: 0px 0px 0px 1px rgba(154,186,203,1)inset; 
      -moz-box-shadow: 0px 0px 0px 1px rgba(154,186,203,1)inset; 
       box-shadow: 0px 0px 0px 1px rgba(154,186,203,1)inset;

任何想法什麼問題或如何解決它？

來源

2012-12-11 Trent Scott

有你在不同的瀏覽器嘗試Gmail中確保它不是一個瀏覽器的問題？ –

大多數電子郵件客戶端渲染HTML，好像它是2001年的標準。

不能使用：懸停或以其它交互式僞選擇
你應該使按鈕的圖像，使其呈現在所有電子郵件客戶端相同。

您需要記住，人們可能會在桌面& Web客戶端中獲取您的電子郵件。展望HTML/CSS可能是最大的問題。

如果使用Mailchimp，我相信他們有一個測試工具，您可以使用複製如何您的代碼將在不同的客戶端渲染。

祝你好運。

來源

2012-12-11 05:24:14 ckaufman

CSS按鈕將不會呈現在電子郵件模板

回答

相關問題