5

ボタンの背景を 2 つの単色にするにはどうすればよいですか? 以下の例を参照してください。

全体的な目的は、ホバー時にボタンが青の 2 つの色合いから灰色の 2 つの色合いに移行することです。

背景の 2 つの単色 ホバー時

色：

  • 青：（#4098D3薄い）、#2B8DCF（濃い）
  • グレー：（#515758薄い）、#2B8DCF（濃い）

HTML ボタンの構文:<button class="submit"></submit>

CSS:

button.submit {
        [background CSS from this question] }

button.submit:hover {
        [background CSS from this question with alternate colors]
        cursor: pointer; 
        -webkit-transition: background 0.5s linear;
        -moz-transition: background 0.5s linear;
        -ms-transition: background 0.5s linear;
        -o-transition: background 0.5s linear;
        transition: background 0.5s linear;
}

このクエリ用にセットアップしたこのJSFiddleを自由に使用してください: https://jsfiddle.net/DMc9N/

あなたの助けは大歓迎です

4

6 に答える 6

9

Chovanec には答えの一部があります。問題は、グラデーションをアニメーション化できないことです。

良い結果が得られる妥協案は、通常どおり色を指定し、その上に半透明の白のグラデーションを重ねることです。

button.submit {
    background-color: #4098d3;
    color: #fff;
    background-image: linear-gradient(0deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 50%, rgba(255,255,255,0.5) 51%);

}

下半分では、設定した色が最終的な色になります。上半分はグラデーションの白となじませるほど薄くなります。

動作させるにはこれで十分です。デモをご覧ください

上半分を明るくしたり暗くしたりするには、背景画像の最後の 0.5 を調整する必要があります。

唯一の欠点は、ホバー状態のライト グレーを正確に制御できないことです。たとえば、ホバー状態で背景画像を設定することもできます

button.submit:hover {
    background-color: #515758;
    background-image: linear-gradient(0deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 50%, rgba(255,255,255,0.7) 51%);
    ...

しかし、それは移行されません（ただし、差が大きすぎない場合、効果は十分です）

ちなみに、このテクニックは、複数の要素を同じ 2 色の外観にしたいが、ベースの色を変更する場合にも使用されます。あるクラスで色を設定し、別のクラスでグラデーションを設定します。

于 2013-05-20T18:09:51.923 に答える
1

あなたに最適な選択: http://colorzilla.com/gradient-editor/ すべてのブラウザー Web をサポートします。:)

ディスプレイに最適にしたい場合は、画像の背景をスライスできると思います。次のようになります。

まず、背景画像を次のサイズでスライスします: width = 1px; 高さ = 画像の高さを指定し、最適なサイズと品質を得るために PNG 形式で保存します。

2番目：ボタンのCSS

button.submit {
        background: url(your-background.png) repeat-x left center; }

button.submit:hover {
        background: url(your-background-hover.png) repeat-x left center;
        cursor: pointer; 
        -webkit-transition: background 0.5s linear;
        -moz-transition: background 0.5s linear;
        -ms-transition: background 0.5s linear;
        -o-transition: background 0.5s linear;
        transition: background 0.5s linear;
}
于 2013-05-20T08:46:36.653 に答える
1

css3 次のようなものを試すことができます。

box-shadow: inset 0px 24px 0px rgba(255, 255, 255, 0.14);

箱の内側に影を付けて、きれいに。

于 2014-06-02T03:57:15.493 に答える
1

コメント内の別のスタックオーバーフローの回答へのリンクに示されているものよりも、HTML が少なく、セマンティックな例がわずかに多くなっています。

https://jsfiddle.net/63Esq/2/

.fancyButton {
    width:100px;
    display:inline-block;
    position:relative;
    background-color:#2B8DCF;
}
.fancyButton span {
    width:100%;
    display:inline-block;
    position:absolute;
}
.fancyButton .bg {
    height:50%;
    top:0;
    background-color:#4098D3 ;
}
.fancyButton .text {
    position:relative;
    text-align:center;
    color:#fff;
}

<a href="#" class="fancyButton">
    <span class="bg"></span>
    <span class="text">hi</span>
</a>
于 2013-05-20T08:00:20.923 に答える