ボタンをCSSだけでつくるをDelicious経由で見て、もうちょっと出来るんじゃないかなーと思ったので、background-imageで複数のlinear-gradient()を使ってグラデーションにプラスアルファする方法の啓蒙も兼ねてほぼ完コピするCSSの書き方を解説しようかなとか何とか。Buttonまずはデモを参照。見ではどっちか画像か分からない程度にはコピーできていることと思う。フォント(というかOS)によっては文字が違く見えることと思うが。CSSは以下のような感じになっている(簡略化するためにベンダー拡張は省略、詳しくはデモのソースを参照)。sans-serif;}ポイントとなる点は以下の3つ。background-*プロパティは複数の値を取ることができる(ただしbackground-colorは除く)工夫するとlinear-gradient()でベタ塗りとグラデーションを任意に組み合わせることができるbackground-sizeでlinear-gradient()のサイズを制御できるbackground-positionでlinear-gradient()の位置(主に開始位置)を制御できるパーツごとに分けて説明していく。1pxとすることで、背景画像(ここではグラデーション)を左上から右に1px下に1pxの位置から開始させることができる。no-repeat;として背景画像を繰り返さないようにする必要がある。右端と下端これはborder-rightとborder-bottomで普通に線を引けば良い。背景画像でも出来ないことはないが、次に説明する右端から1px手前のボタンの影にあたる部分の位置決めが面倒になるのでborderが良い。153)になっている。いうベタ塗り→ベタ塗りの場合は上記のコードまたは以下の例のように、二点間を同じ色にしてしまえば良い。9px)この例では上から1~3pxまでは赤(red)、4~6pxまでは緑(green)、7~9pxまでは青(blue)でそれぞれベタに塗られることになる。このようにグラデーションの開始と終了を同じ行に書いたりすると少しは見やすく、あとで読んでも分かりやすくなると思う。31pxをそれぞれ指定することによって右端の縦方向に1pxの線を引くような感じにする。31px;ボタンの影にあたる部分のコードをまとめると以上のようになる。153))なので、linear-gradient()のコードは以下のようになる。auto;これらのプロパティを既にポイントとして説明した複数の値が取れることを利用して、すぐ前の右端から1px手前でまとめたコードのbackground-*プロパティそれぞれに,(カンマ)で区切って追加することになる。auto;複数の値を指定した場合に先に書いた方が手前に来るのは覚えていたほうが良い。url("back.png");だとfront.pngがback.pngの上になる。最後に最後に上端と左端のコードや右端と下端のコード、その他paddingやheight、font-*などをGoogleの検索ボタンと同じようにすれば良い。5など古いWebKitのブラウザでは-webkit-linear-gradientはないので、-webkit-gradient(linear)を使うことになる。この場合色指定をcolor-stop()で行うのだが、これにはpx単位での位置指定が出来ないので計算機で頑張って計算してください。詳しくはデモのソースを参照。1px)とか早く気軽に使えるようになるといいな。