1

ボタンに CSS を使用する電子メール テンプレートがあります。ほとんどのメール クライアントでは、ボタンは問題なく表示されます (緑色のグラデーション)。ただし、Gmail では、ボタンは表示されません。

スクリーンショットを見る (Gmail で表示):

ここに画像の説明を入力

ボタンのコードは次のとおりです。

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

何が間違っているのか、それを修正する方法はありますか?

4

1 に答える 1

5

ほとんどの電子メール クライアントは、HTML を 2001 年の標準のようにレンダリングします。

  • :hover やその他のインタラクティブな疑似セレクターは使用できません
  • すべての電子メール クライアントで同じように表示されるように、ボタンを画像にする必要があります。

デスクトップや Web クライアントであなたのメールを受信して​​いる可能性があることを覚えておく必要があります。Outlook は、html / css のレンダリングでおそらく最大の問題を抱えています。

Mailchimp を使用している場合は、さまざまなクライアントでコードがどのようにレンダリングされるかを再現するために使用できるテスト ツールがあると思います。

幸運を。

于 2012-12-11T05:24:14.640 に答える