CSS1 のみで質感のあるボタンを表現してみる

CSS

CSS3 を駆使すると、とてもリッチなボタンパーツが表現できるようです。

悲しいことに勤務先の PC の標準ブラウザは IE6。近いうちに IE8 へのアップグレードを予定してますが、残念ながら IE8 では CSS2.1 までしか対応してないようです。
上記のリンク先のサンプルには遠く及びませんが、先日、PC の中身を整理してたら IE6 で質感のあるボタンを作ろうと試行錯誤してた頃の html ファイルが見つかりました。会社で CSS3 が使えるようになるのも当分先になりそうですので、備忘録としてこちらに残しておきたいと思います。

li 要素と a 要素でボタンを表現

li と a 要素に CSS を当てることで、以下のようなボタンを表現することができます。

<ul class="ex-buttons">
	<li><a href="#">登録</a></li>
	<li><a href="#">キャンセル</a></li>
</ul>

Demo

STEP1 : li 要素の定義

li 要素に対し、ボタンのサイズ / 外枠のライン / 背景色を指定します。また、ボタンが水平に並ぶように li 要素を inline-block にします。IE7 以下は inline-block に対応してないので、inline + zoom:1 で代用します（関連記事）

ul.ex-buttons li{
	margin:0 2px;
	padding:0;
	width:100px;
	height:12px;
	display:inline-block;
	/display:inline;
	/zoom:1;
	border-style:solid;
	border-width:1px 1px 8px;
	border-color:#c0c0c0;
	background:#e0e0e0;
}


STEP2 : a 要素の定義

a 要素にはボタン内枠のラインを指定します。また、リンクを示すアンダーラインの表示を消し、block 要素にします。

ul.ex-buttons li a{
	text-decoration:none;
	display:block;
	border-style:solid;
	border-width:1px;
	border-color:#fff;
	color:#505050;
}


STEP3 : a 要素の配置調整

li 要素に position:relative 、a 要素に position:absolute を指定し、li 要素を基準とした a 要素の配置調整をします。a 要素のボタン内枠のラインが、li 要素のボタンの外枠ラインの内側にくるようにサイズ・位置を調整します。

ul.ex-buttons li{
	position:relative;
}
ul.ex-buttons li a{
	margin:0;
	padding:2px 0 0;
	width:98px;
	height:15px;
	font-size:13px;
	line-height:1em;
	text-align:center;
	position:absolute;
	top:0;
	left:0;
}


STEP4 : hover / active 時のスタイル設定

マウスがボタンの上に乗った場合、ボタンの枠線を強調表示するようにします。また、ボタンクリック時はボタンが押下されたように見せるため擬似クラスの :active にてテキストの表示位置をずらします。

ul.ex-buttons li a:hover{
	border-color:#00b0ff;
}
ul.ex-buttons li a:active{
	padding-left:3px;
}


STEP5 : ボタン幅を変更してみる

内枠の幅が外枠の幅より 2px 小さくなるように設定します。

ul.ex-buttons li{
	width:150px;
}
ul.ex-buttons li a{
	width:148px;
}


STEP6 : 配色を変更する

li 要素の背景・枠線、a 要素のテキスト・枠線の配色を設定します。

ul.ex-buttons li{
	border-color:#303030 #404040 #303030 #404040;
	background:#606060;
}
ul.ex-buttons li a{
	border-color:#a0a0a0;
	color:#e0e0e0;
}
ul.ex-buttons li a:hover{
	border-color:#ff0000;
}


STEP7 : クロスブラウザの対応確認

IE6 以外のブラウザでも同じように表示されます。






li 要素と button / input[type=submit or button] 要素でボタンを表現

a 要素の替わりに button 要素や type 属性が submit や button の input 要素を使うこともできます。

<h3>ul.ex-buttons + li + button</h3>
<ul class="ex-buttons">
	<li><button>登録</button></li>
	<li><button>キャンセル</button></li>
</ul>

<h3>ul.ex-buttons + li + input[type=submit]</h3>
<ul class="ex-buttons">
	<li><input type="submit" value="登録"/></li>
	<li><input type="submit" value="キャンセル"/></li>
</ul>

<h3>ul.ex-buttons + li + input[type=button]</h3>
<ul class="ex-buttons">
	<li><input type="button" value="登録"/></li>
	<li><input type="button" value="キャンセル"/></li>
</ul>

CSS は以下のように定義します。

ul.ex-buttons li button,
ul.ex-buttons li input{
	margin:0;
	padding:0;		/* テキスト位置調整不要 */
	width:100%;		/* サイズ調整不要 */
	height:19px;
	font-size:13px;
	line-height:1.1em;
	position:absolute;
	top:0;
	left:0;
	border-style:solid;
	border-width:1px;
	background-color:transparent;	/* 透過 */
	border-color:#fff;
	color:#505050;
}
ul.ex-buttons li button:hover,
ul.ex-buttons li input:hover{
	border-color:#00b0ff;
}
ul.ex-buttons li button:active,
ul.ex-buttons li input:active{
	padding-left:3px;
}

下記の点が a 要素で定義した場合と異なります。

  • width の指定が 100% で済むため、ボタン幅の調整は li 要素に対してのみ行えば良い
  • padding-top によるテキスト位置の調整が不要
  • background-color を 透過（transparent）にする

ラップ要素を li 以外にしてみる

基本、要素が入れ子状態であれば li 要素でなくても問題ありません。（マークアップ的にはよろしくないかもしれませんが）下記例では li の替わりに span を使ってみます。

<h3>span.ex-button + a</h3>
<span class="ex-button"><a href="#">登録</a></span>
<span class="ex-button"><a href="#">キャンセル</a></span>

<h3>span.ex-button + button</h3>
<span class="ex-button"><button>登録</button></span>
<span class="ex-button"><button>キャンセル</button></span>

<h3>span.ex-button + input[type=submit]</h3>
<span class="ex-button"><input type="submit" value="登録"/></span>
<span class="ex-button"><input type="submit" value="キャンセル"/></span>

<h3>span.ex-button + input[type=button]</h3>
<span class="ex-button"><input type="button" value="登録"/></span>
<span class="ex-button"><input type="button" value="キャンセル"/></span>

CSS は以下のように定義します。

span.ex-button{
	padding:0;
	width:100px;
	height:12px;
	position:relative;
	display:inline-block;
	/display:inline;
	zoom:1;
	border-style:solid;
	border-width:1px 1px 8px;
	border-color:#c0c0c0;
	background:#e0e0e0;
}
span.ex-button a,
span.ex-button button,
span.ex-button input{
	margin:0;
	padding:2px 0 0;
	width:98px;
	height:15px;
	font-size:13px;
	line-height:1.1em;
	text-align:center;
	position:absolute;
	top:0;
	left:0;
	text-decoration:none;
	display:block;
	border-style:solid;
	border-width:1px;
	border-color:#fff;
	color:#505050;
}
span.ex-button button,
span.ex-button input{
	padding:0;
	width:100%;
	height:19px;
	background-color:transparent;
}
span.ex-button a:hover,
span.ex-button button:hover,
span.ex-button input:hover{
	border-color:#00b0ff;
}
span.ex-button a:active,
span.ex-button button:active,
span.ex-button input:active{
	padding-left:3px;
}

ダウンロード

定義内容が同じ部分を一箇所にまとめて定義し直してみました。