ボタンに2つの異なるフラットカラーを追加して、CSSスタイリングをボタンに追加したい

Question

ボタンに2つの異なるフラットカラーを追加して、CSSスタイリングをボタンに追加したいとします。ボタンの左半分は青色で、右半分は赤色でなければなりません。

Answer 1

あなたが背景としてグラデーションを使用し、50％の最初の色を停止し、50％で第二を開始することができます。

button { 
 
    background: -webkit-linear-gradient(blue 50%, red 50%); 
 
    background: linear-gradient(to right, blue 50%, red 50%); 
 
    background: -o-linear-gradient(blue 50%, red 50%); 
 
    background: -moz-linear-gradient(blue 50%, red 50%); 
 
    -webkit-appearance: \t none; 
 
    appearance: \t none; 
 
    border: none; 
 
    font-size: 15px; 
 
    color: #FFF; 
 
    padding: 8px 16px; 
 
}

<button>Button</button>

グラデーションの角度を変更したい場合方向はほんの始まりにXdegを使用します。

button { 
 
    background: -webkit-linear-gradient(-60deg, blue 50%, red 50%); 
 
    background: linear-gradient(-60deg, blue 50%, red 50%); 
 
    background: -o-linear-gradient(-60deg, blue 50%, red 50%);; 
 
    background: -moz-linear-gradient(-60deg, blue 50%, red 50%);; 
 
    -webkit-appearance: \t none; 
 
    appearance: \t none; 
 
    border: none; 
 
    font-size: 15px; 
 
    color: #FFF; 
 
    padding: 8px 16px; 
 
}

<button>Button</button>

Answer 2

このような？

button{ 
 
    background: -webkit-linear-gradient(left, blue 50%, red 50%); /* For Safari 5.1 to 6.0 */ 
 
    background: -o-linear-gradient(right, blue 50%, red 50%); /* For Opera 11.1 to 12.0 */ 
 
    background: -moz-linear-gradient(right, blue 50%, red 50%); /* For Firefox 3.6 to 15 */ 
 
    background: linear-gradient(to right, blue 50%, red 50%); /* Standard syntax */ 
 
}

<button>Click here</button>