1

Button Makerを使用してCSSグラデーションボタンを作成しましたが、CSSの制限により、Outlookで正しく表示されません。したがって、Outlookにもっとシンプルなボタンを表示したいのですが、境界線とテキストリンクの間の背景を塗りつぶすことができませんでした（テキストの周りの5pxのパディングを塗りつぶす必要があります）。スパンスタイルとリンクスタイルの両方でbackground-color：＃65a9d7を指定しました。

私の問題：見通しの私のボタン

私のボタンコード：

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

私は何年もの間コードをいじくり回してきたので、あなたの助けに大いに感謝します！

4

6 に答える 6

5

メールで防弾ボタンを作成するための Campaign Monitor のツールを参照してください。画像がオフになっている場合のフォールバック表示で Outlook 用の VML を使用します。

ボタン.cm

于 2013-01-22T16:09:56.940 に答える
4

他の回答が示唆するように、Outlook 2007、2010、および 2013 で本当に普遍的なものに対するサポートはかなりひどいものです。このボタンの場合の主な問題は、これらのバージョンの Outlook でマージン プロパティがサポートされていないことです (レンダリング エンジンとして MS Word を使用しています、yuk!) Litmus はこれと解決策を非常によく説明しています。

ほぼすべての主要な電子メール クライアントで機能するHTML テーブル ベースのボタンを作成することができました。

参照用の 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>

これがあなたや偶然に起こったグーグルユーザーにとってまだ役立つことを願っています.

于 2014-04-01T00:48:35.800 に答える
4

ボタンの背景と同じ色の境界線を使用することが信頼できる回避策であることがわかりました。したがって、これの代わりに：

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

これを試して：

a.button { background: #dddddd; border: 8px solid #dddddd; }
于 2013-07-18T14:48:27.500 に答える
2

Litmus には、さまざまなオプションとそのサポートに関するすばらしいブログ投稿があります。私は通常、パディング + ボーダー オプションを使用します。すべての主要なクライアントで機能することがわかりました (ロータス ノートを除く)。

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

注: テストするときは、リンクに適切な URL が必要です。そこにハッシュがあるだけの場合、outlook.com ではリンクが取り除かれるため機能しません。

于 2016-01-28T04:01:56.620 に答える
-1

アンカーを直接スタイルしようとしましたか?

.buttoncustom a {
       border: 1px solid #96d1f8;
       background: #65a9d7;
       padding: 5px 10px;
}
于 2013-01-22T13:34:24.650 に答える