タイトル画像、ボタン・アイコン

６．四角いボタン

ベーシックな四角いボタンの作り方です。どんなページにも使いやすいですよ！

▼

青いボタンを作ってみましょう。大きさは、88*31が標準です。自分のページだけで使うのなら、大きさは、あまり問題ではないですが・・。（左の画像は２倍で表示してます。）

▼

上の辺と左の辺、３pxを水色に、右と下、４pxを紺色にします。なぜ紺色を４pxにしたかというと、濃い色は細く見えてしまいます。見た時に同じ太さに見えるよう、１px太くしておきます。

▼

そこに文字を書いていくます。今回はへこみ文字にしてみました。明るい色、暗い色を、枠と反対にするとへこんで見えます。（浮き出し文字の作り方、参照）

▼

打ち出し文字にするとこんな感じです。

▼

角の部分に白を入れると、ちょっとだけ強い光があたった感じになります。分かりますか？左上の角の部分です。