2

CSS3を使用してこのボタンを作成しようとしています: ここに画像の説明を入力

しかし、私のボタンは今このように見えます：

ここに画像の説明を入力

CSS3 グラデーション効果は、どういうわけか青色を削除します。なぜそうなるのか、どうすれば修正できますか。

jsFiddle の例を次に示します: http://jsfiddle.net/fjYWZ/

HTML コード:

<a class="button large facebook radius nice" href="#">Logga in med facebook</a>

CSS コード:

        .button{

                -moz-transition-duration: 0.1s;
                -moz-transition-property: opacity;
                -moz-transition-timing-function: ease-in;

                background-color: #999999;
                border: 1px solid #999999;
                color: #FFFFFF;
                cursor: pointer;
                display: inline-block;
                font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
                font-size: 1.3rem;
                font-weight: bold;
                line-height: 34px;
                margin: 0;
                outline: medium none;
                padding: 0 34px;
                position: relative;
                text-align: center;
                text-decoration: none;
        }
        .large {
            font-size: 18px;
            line-height: 48px;
            padding: 0 40px;
            width: auto;
        }

        .facebook {
            background-color: #3B5998;
            border-color: #3B5998;
            color: #FFFFFF;
        }
        .button.radius {
            border-radius: 7px 7px 7px 7px;
        }
        .full-width {
            padding-left: 0 !important;
            padding-right: 0 !important;
            text-align: center;
            width: 100%;
        }
        .nice {
            background: -moz-linear-gradient(center top , rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0)) repeat scroll 0 0%, none repeat scroll 0 0 #999999;
            box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) inset;
            text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.3);
        }
4

2 に答える 2

2

.buttonこのプロパティをクラス に追加するだけです

.button{
   /*Your existing styling*/
   background: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0.4)), to(rgba(255, 255, 255, 0)));
}

この更新されたフィドルを試してください

編集複数の色をサポートするようにコードを更新しました。ここでは、異なる色の 2 つのボタンを見つけることができます。.red&として2つのクラスを追加しまし.blueた。新しいフィドルを参照してください

.blue{
    background: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0.4)), to(rgba(255, 255, 255, 0)));
        background: -moz-linear-gradient(center top , rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0)) repeat scroll 0 0%, none repeat scroll 0 0 #999999;
}

.red{
    background: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 0, 0, 0.4)), to(rgba(255, 0, 0, 0)));
        background: -moz-linear-gradient(center top , rgba(255, 0, 0, 0.4) 0%, rgba(255, 0, 0, 0)) repeat scroll 0 0%, none repeat scroll 0 0 #999999;
}

注:bodyこれらのプロパティをクラスから削除してください。また、必要な数のカラー クラスを追加し、このクラスをスタイル タグの 2 番目のパラメータとして次のように追加します。

<a class="button blue large facebook radius nice" href="#">Logga in med facebook</a>

ここでclass="button blue large facebook radius nice"は、2 番目のクラスを新しいカラー クラスとして使用します。

于 2012-06-23T15:01:38.747 に答える
1

背景-moz-linear-gradientをリセットして#999999...に変更する#3B5998と、美しく機能します。

-moz プレフィックスは、これが Firefox でのみ機能することを意味することに注意してください。

于 2012-06-23T15:03:05.730 に答える