すごく良い顔。

コメント: 8

世に変な形したボタンが多すぎるので以下まとめる。

そもそもボタンとは

メタファとして擬似的にスイッチを連想するものとしてwebで使われていることを前提としている。ボタンは

• 立体である
• 押下できるものである

光源は

• 左または左上からとする（人間だいたい右利き）

この条件をもとに立体ボタンを順番に完成させてみる。

まずはボタンの原型。大げさに。

これに影を加える。

これに照り返しを加える。

さらに角部分にハイライトを当てる。ひとまずこれで完成。

次にロールオーバー時。指がボタン上に来る瞬間なので、全体的に影がうっすらとかかる程度。

んで押下（クリック）時。ボタンがへこむので、影は全部消える。下に1pxくらい動きがあると「押したっ」感がでてモアベタ。押したときのボタン上面の色はシュレーディンガーの猫よろしく見えないので何色でもどうぞ。

上記をすべて踏まえてCSSのみで作ったのが以下。こんなのが画像使わずに出来るなんてすばらしいと思わんかね。

コードは以下。

<style TYPE="text/css"> <!-- .btn_submit{ font-weight:bold; font-family:sans-serif; border:1px solid #bbb; padding: 4px 20px; color: #666; cursor: pointer; background: #eee; border-radius: 3px; font-size:18px; /* Webkit */ -webkit-border-radius:3px; -webkit-box-shadow:1px 1px 3px #bbb, -1px -1px 1px #eee, 1px 1px 0 0 #fff inset; /* Firefox */ -moz-border-radius: 3px; -moz-box-shadow: 1px 1px 3px #bbb, -1px -1px 1px #eee, 1px 1px 0 0 #fff inset; } .btn_submit:hover{ color: #fff; background: #999; /* Webkit */ -webkit-box-shadow: 1px 1px 3px #bbb,1px 1px 0 0 #aaa inset; /* Firefox */ -moz-box-shadow: 1px 1px 3px #bbb,1px 1px 0 0 #aaa inset; } .btn_submit:active{ top:1px; position:relative; background: #959595; /* Webkit */ -webkit-box-shadow: 0 0 0 #fff; /* Firefox */ -moz-box-shadow: 0 0 0 #fff; } --> </style> <input type="button" value="バ ル ス" class="btn_submit" />

よく「カッコいいボタンの作り方」「アクア風ボタンが簡単に！」とか見ますが、基本を無視して作るとページとしてまとまりのない変な見栄えになります。基本的に光源はひとつ。ドロップシャドウはやりすぎずに。

IE環境の人はうまく見れないかもしれませんのでブラウザ変えてください。ボックスシャドウとかCSS3のお話はCSS3リファレンスをどうぞ。

あれこのサイトのボタンどうなってるのとかダメ、ゼッタイ。

コメント: 4

子供の顔と、かわいいオネェちゃんと、性器だらけの世界は避けたいよ。小物病です。

コメント: 0