CSSだけでデザイン変更

まずは、このシンプルなボタンのHTMLを用意します。「button」というclassをつけておきます。

<input type="submit" name="search" value="検索" class="button" / >

画像を使わず、CSSの背景とborderだけでデザイン変更してみたのがこちら。

.cssButton{
color: #fff;
border-top:3px double #9cf;
border-left:3px double #9cf;
border-right:3px double #4080BF;
border-bottom:3px double #4080BF;
background: #32A7CA url(../img/bg.gif) left bottom repeat-x;
text-align: center;
}

ボーダーを、上下左右の色を変えていることと、さらにボーダーのスタイルをdoubleにしているのが立体感が出るミソ。（でも、IEだと、ボーダーに背景がつかないのでいまいちではあります。。太さと色を調整して、ボーダースタイルをsolidにしてもよさげです）

もうちょっと押せる感を出してみましょうか。

1）アイコン画像を背景に配置して、誘目度を上げる

.cssButton{
....（略）....
background: #32A7CA url(ico.gif) left center no-repeat;
....（略）....
}

とか、

2）グラデーション画像を背景にして、立体感を出す

.cssButton{
....（略）....
background: #32A7CA url(../img/bg.gif) left bottom repeat-x;
....（略）....
}

3）CSSだけで角丸表示にする（Firefoxのみ）

.cssButton{
....（略）....
-moz-border-radius:5px;
....（略）....
}

などなど。本当にささいな部分ですが、こういった細かい仕事によって、わかりやすさが変わってきます。

マウスオーバー時の:hoverも設定すると、押せる感が出てよいです。操作に対するフィードバック感がだいじです。（※残念ながら、IE6では動きません）

.button:hover{
color: #fff;
border-top:3px double #254A70;
border-left:3px double #254A70;
border-right:3px double #508AC5;
border-bottom:3px double #508AC5;
background: #369;
}

角丸ボタンのつくりかた

角丸ボタンのテクニックはいくつかあります。
ここで紹介するのは、画像1枚とCSSファイル1枚でWii風のボタンができあがり、というもの。

Simple Round CSS Links ( Wii Buttons )
http://www.hedgerwow.com/360/dhtml/css-round-button/demo.php

<span class="button"><input type="submit" name="foo" value="yout text" /></span>

なお、サンプルでは、IE以外のブラウザは<input>タグではなく、<button>タグ使用になっていますが、CSSに、

span.button:hover input{
background-position:100% -60px;
}

を追記すれば、inputでも表示されるようです。

※ちなみに、「buttonタグ」はHTML/CSSまとめノートでも紹介しましたがimgタグを中に含めることができるなど、デザインしやすくなかなか使えます。

inputタグが使えることと、IE5.5/IE6/IE7/Safari 2/Firefox 2/Opera 9をサポートしていることから、このテクニックの使いどころは高いような気がします。お試しあれ。

その他の角丸ボタンテクニック

以下、その他の角丸テクニックのURLをいくつか記載しておきます。
詳しくはリンク先からどうぞ。

Create Link Buttons with simple CSS and HTML
http://www.hedgerwow.com/360/dhtml/css-simple-link-button-with-round-corner/demo.php

filament group inc. || Styling the Button Element with Sliding Doors
http://www.filamentgroup.com/lab/buttonElement/

ボタンそのものだけではなく配置のしかたにも工夫を

もちろん、ボタンは目立たないと押してもらえないないですね。
でも、「押せ押せ押せ」とばかりにボタンのほうを大きく、やたらに目立つ色にしてしまってゴチャゴチャしてしまっては本末転倒。

逆の発想で、余白を大きくとってみるのも、ひとつの手です。
また、「主役」にするために余計な要素を廃すること。引き算の発想も大事です。

では、また次回！