javascript - ボタンの背景の半分を色で塗りつぶす方法はありますか?

Question

ボタンの背景の半分を色で塗りつぶす方法はありますか?

お気に入り：

|BLUEBLUEBLUE REDREDREDRED|

Answer 1

はい、グラデーションの背景を持つ CSS でこれを行うことができます。

background-image: linear-gradient(left , rgb(255,0,0) 50%, rgb(0,0,255) 51%);
background-image: -o-linear-gradient(left , rgb(255,0,0) 50%, rgb(0,0,255) 51%);
background-image: -moz-linear-gradient(left , rgb(255,0,0) 50%, rgb(0,0,255) 51%);
background-image: -webkit-linear-gradient(left , rgb(255,0,0) 50%, rgb(0,0,255) 51%);
background-image: -ms-linear-gradient(left , rgb(255,0,0) 50%, rgb(0,0,255) 51%);

background-image: -webkit-gradient(
    linear,
    left bottom,
    right bottom,
    color-stop(0.5, rgb(255,0,0)),
    color-stop(0.51, rgb(0,0,255))
);

このサイトを使用して、ニーズに合わせてカスタマイズしてください: http://gradients.glrzad.com/

そして、ここにフィドルがあります：http://jsfiddle.net/GNCRL/