スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

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

下のボタンCSS3を駆使して色々しているのは分かりますが、最近フラットなデザインが流行っていることもあり、何となくあか抜けない気がします。

btn-sampl-tittle.jpg

なぜでしょうか。

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

ボタンの色(background-color)

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

最初に青いボタンです。

btn1-1.jpg

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

btn1-1.jpg

緑系も同じです。

btn1-1.jpg

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

btn1-1.jpg

オレンジも同じです。

btn1-1.jpg

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

テキストの色(color)

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

btn5-1.jpg

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

btn5-1.jpg

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

btn5-1.jpg

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

btn5-1.jpg

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

btn5-1.jpg

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

角丸(border-radius)

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

btn2-1.jpg

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

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

btn2-1.jpg

もっと丸くしてみます。

btn2-1.jpg

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

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

btn2-1.jpg

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

btn2-1.jpg

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

ボックスシャドウ(box-shadow)

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

btn3-1.jpg

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

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

btn3-1.jpg

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

btn3-1.jpg

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

btn3-1.jpg

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

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

こういうのもありです。

btn3-1.jpg

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

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

グラデーション(linear-gradient)

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

btn4-1.jpg

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

btn4-1.jpg

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

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

btn4-1.jpg

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

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

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

btn4-1.jpg

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

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

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

さいごに

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

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

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

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

フィードやTwitterで最新情報をチェック
follow us in feedly
この記事に付いているタグの最新記事一覧
loading...
コメント









※コメントはご意見ご感想や間違いのご指摘等にしていただけますようお願いいたします。コメントを確認する時間がなく、技術的なご質問をいただいても答えできません。申し訳ございませんがご理解のほどお願いいたします。

Recent Entry
Popular Entry
  • このエントリーをはてなブックマークに追加
  • このエントリーをはてなブックマークに追加
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。