防弾のhtml電子メールボタン

Question

私は最近、電子メールテンプレートの作成に取り掛かりましたが、私は何の説明も見つけられていないいくつかの問題に遭遇しました。

私はボタンが弾丸であると予想してボタンを生成しました。ほとんどのクライアントにとっては素晴らしいものの、ウェブベースのOutlookクライアントでは失敗しました。

結果は私が目指しています何

<table style="width: 100%" border="0" cellspacing="0" cellpadding="5"> 
    <tr> 
     <td style="font-family: arial;"> 
      <!--[if mso]> 
       <v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="#" style="height:30px;v-text-anchor:middle;width:150px;font-family:arial;background-color:#72BC00;color:#ffffff;" arcsize="14%" stroke="f" fillcolor="#72BC00"> 
       <w:anchorlock/> 
        <center> 
      <![endif]--> 
       <a href="#" style="background-color:#72BC00;border-radius:4px;color:#ffffff;display:table;line-height:30px;text-align:center;font-size:14px;text-decoration:none;width:150px!important;-webkit-text-size-adjust:none; font-family: arial;">Learn More</a> 
      <!--[if mso]> 
        </center> 
       </v:roundrect> 
      <![endif]--> 
     </td> 
    </tr> 
</table> 

がこれです（若干の修正を加えて、後述する）。このように登場：

Screen shot of working version

しかし、私はすべてのブラウザベースの見通しのために得ますクライアントはこれです：

Screen shot of failed version

失敗したバージョン

1. でセルパディングが
2. ボタンはもはやリンクされない障害が発生したということで

   問題は、実際にはすべてのスタイルは、ボタンから取られており、親テーブルに適用されます。

3. 最初のアイテムは実際には最後のアイテムになっていますが、それはトップに移動され、明白な理由ですべてのスタイルが取り除かれます。

解決方法はありますか？私はまだ何かを見つける必要があります。ありがとう！ Iが生成ボタンに加えたもの

である：細胞パディング、（100％の幅であることから、ボタンを固定し、見通しの中央にテキストを可能にする）tableにinline-blockからの表示を変更し、含有元素にテーブルを作っていませんdiv。

Answer 1

＃2の場合、VMLコードのURLとアンカータグを更新していますか？ Outlookは、アンカータグではなく、リンクにVMLのURLを使用します。

これは、電子メールのリンク追跡システムの多くに問題を引き起こします。これは、この種のボタンの使用を避ける理由の1つです。ほとんどのクライアントは、Outlookが丸みを帯びたコーナーを失うことを理解しながら、プレーンなCSSスタイルのボタンを使用するようにしました。

Answer 2

Buttons.cm はでした。良いリソースですが、少し古くなっています。

私はOutlookをサポートしていますが、できるだけVMLを避けるようにしてください。

<!-- Button : Begin --> 
<table role="presentation" cellspacing="0" cellpadding="0" border="0" align="center" style="margin: auto;"> 
    <tr> 
     <td style="border-radius: 3px; background: #222222; text-align: center;" class="button-td"> 
      <a href="http://www.google.com" style="background: #222222; border: 15px solid #222222; font-family: sans-serif; font-size: 13px; line-height: 1.1; text-align: center; text-decoration: none; display: block; border-radius: 3px; font-weight: bold;" class="button-a"> 
       &nbsp;&nbsp;&nbsp;&nbsp;<span style="color:#ffffff">A Button</span>&nbsp;&nbsp;&nbsp;&nbsp; 
      </a> 
     </td> 
    </tr> 
</table> 
<!-- Button : END --> 

すべて は厄介ですが、それはすべてのクライアントが普遍的に理解して何か：私は現在、このようなものを使用します。

秒、シンプルなオプションがそうのように、偽のパディングにborder-widthを使用することです：一部の電子メールクライアント（主にOutlookが）border-width以上12か15のピクセルを許可していません

<table width="100%" border="0" cellspacing="0" cellpadding="0"> 
    <tr> 
    <td> 
     <table border="0" cellspacing="0" cellpadding="0"> 
     <tr> 
      <td> 
      <a href="http://litmus.com" target="_blank" style="font-size: 16px; font-family: Helvetica, Arial, sans-serif; color: #ffffff; text-decoration: none; border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px; background-color: #EB7035; border-top: 12px solid #EB7035; border-bottom: 12px solid #EB7035; border-right: 18px solid #EB7035; border-left: 18px solid #EB7035; display: inline-block;">I am a button &rarr;</a> 
      </td> 
     </tr> 
     </table> 
    </td> 
    </tr> 
</table> 

、これが唯一のこれはいくつかの欠点があります。

防弾ボタンのその他のオプションare on Litmus