今どんなボタンが好きかCSSプロパティごとに検討してみた

なぜでしょうか。

ということで、どのようなボタンが好きかプロパティごとで考えてみます。

ボタンの色（background-color）

まずはどのような色がよいか考えてみます。背景色によってどの色がよいかは違ってくると思いますが、今回は白い背景色で考えます。

最初に青いボタンです。

色がきつすぎてあまり好きではないです。同じ青系でも薄くてさわやかな色の方が好きです。

緑系も同じです。

濃い緑より薄い緑の方が好きです。

オレンジも同じです。

ということで薄めで明るい感じの色が好きです。

テキストの色（color）

続いてテキストの色について考えます。まずは白。

これが一番いい気しますが、一応いくつかやってみます。では黒。

なんかきつすぎる。次は背景と対極の色ですが変な感じ。

今度は背景と同系色で。まずは薄い感じ。

なくはなくかな。今度は濃い感じ。

こっちもなくはないけど、やっぱり白が一番です。

角丸（border-radius）

続いて角の丸さについて考えてみます。

別に丸くなくてもいいような気もしますが、せっかくですので丸くしてみます。

まず、少し丸くしてみます。

もっと丸くしてみます。

ここまで丸くするとちょっと古くさい感じがします。

これくらいが好きです。3pxの角丸です。小さいボタンだと2pxでもいいとお思います。

これもちょっと丸すぎる気がします。

ということで、あまり目立たない微妙な角丸が好きです。

ボックスシャドウ（box-shadow）

続いてボックスシャドウについて考えてみます。

なかったらなかったでいい気もします。

とはいうもののせっかくなので影を付けてみます。

黒系統よりボタンの色と同じ系統の色の方が好きです。

影はぼかさない方が好きです。

同系色で影をぼかさないのが好きですね。コードはこんな感じです。

box-shadow:  1px 1px 0px #1c6a9e, 2px 2px 0px #1c6a9e, 3px 3px 0px #1c6a9e;

こういうのもありです。

下方向のみに影を付けています。

box-shadow: 0px 3px 0px #1c6a9e;

グラデーション（linear-gradient）

今度はグラデーションです。

きつい青のきついグラデーションは好きではないです。

とはいうものの薄くてもきついグラデーションも好きではないです。

グラデーションにするなら微妙な方が好きです。

これくらい微妙だと一見グラデーションかどうか分かりませんね。

background: linear-gradient(#5faee3, #217dbb);

次のやつもありといえばあり。

もはやグラデーションではない気もしますが。

background: linear-gradient(top, #429fde 0%, #429fde 50%, #2691d8 50%, #2691d8 100%);

ということで、無理してグラデーションを使う必要はないです。

さいごに

ということで、ボタンについて色々考えてみました。

ちょっと前までCSS3を駆使した立体的なボタンがいいと思っていましたが、最近はフラットなデザインが流行っていることもありシンプルなボタンの方が好きです。

シンプルなボタンだとCSSで十分表現できますし、わざわざ画像のする必要もないですね。

ほんと時代の流れは速いです。1年くらいしてこの記事を読んでどう思うか楽しみです。