『神は細部に宿る』と言いますが、デザインを作る際にも
細かい部分にホンの一手間加えることで、素人っぽさを抜け出した
より高級なデザインを作ることができます。

今回はその一手間を使って実際にボタンを作ってみたいと思います。

下の画像は何も効果をかけていない常態です。
のっぺりしていて、押したい！という気持ちにはあまりならないですよね。

 

グラデーションをかける

 

とても基本的なことですが、グラデーションをかける事で立体感がでて
ボタンらしさを表現することができます。

  

1pxのラインを引く

 

下の画像は、ボタン背景上部に1pxのホワイトラインを
テキストの内側にシャドウと外側にハイライトを入れました。

たかが1px、されど1px、これを入れることでより質感を高めることができます。

1pxのラインはcss3のbox-shadowでも再現できるので、
cssだけでも十分に綺麗なボタンを作ることができますね。

 

↓のサイトで1pxの効果的な使い方が見れますよ

1ぴくのラインにこだわったデザインスタディ
http://coliss.com/articles/build-websites/operation/design/2865.html