ロールオーバー・ボタンC
擬似クラスを使用したカラフルなボタン

2007/8/19

span要素に擬似クラス:hoverを使用したロールオーバーボタンです。

<style type="text/css">
	/* 通常時 */
	.robtnC { 
		margin:2px; padding:1px;
		border:1px solid #000;
		background-color:#fff;
		text-decoration:none;
	}
		.robtnC span {
			margin:0 5px 0 0; padding:0 5px;
			background-color:#000;
			color:#fff;
		}
	/* マウスが乗った時 */
	.robtnC:hover {
		margin:2px; padding:1px;
		background-color:#fff;
		text-decoration:none;
	}
		.robtnC:hover span {
			background-color:orange;
		}
</style>

<a class="robtnC" href="#"><span>おすすめ情報</span>コチラから&nbsp;&raquo;&nbsp;</a>

ロールオーバー・ボタンA
マウスON／OFF時の画像入替

2007/8/19

JavaScriptを使わずに、スタイルシートだけのロールオーバーボタンです。
※JavaScriptによるボタンのロールオーバーボタンはコチラ。

以下の2枚の画像を用意します。画像サイズは揃えた方がキレイです。
　・「通常時の画像」（btn_off.gif）
　・「リンクにマウス乗った時の画像」（btn_on.gif）

それぞれ通常時のリンク（a）、マウスが乗った時のリンク（a:hover）の背景画像に指定し、マウスイベントによって画像を入れ替え表示します。

ポイントは、a要素にdisplay:block;を指定し、ブロック要素扱いにすること。 インライン要素のままだとボタン画像のサイズ指定をしていても、画像全体が表示されません。

<style type="text/css">
	/* 通常時 */
	.ro1 {
		background:url(/content/img/btn/btn_off.gif) no-repeat;	/* 画像(off) */
		width:59px; height:18px;	/* 画像の幅・高さ */
		margin:0; padding:0;	/* 余白指定 */
		display:block;	/* ブロック要素扱い */
	}
	/* マウスが乗った時 */
	.ro1:hover {
		background:url(/content/img/btn/btn_on.gif) no-repeat;	/* 画像(on) */
	}
</style>

<a href="#" class="ro1"></a>

ロールオーバー・ボタンB
マウスを乗せると凹むボタン

2007/8/19

a要素に2種類のボーダースタイル（outset/inset）を指定し、さらにボーダーの上右と下左それぞれに濃淡色を指定することで凹凸感がでるロールオーバーボタン。

<style type="text/css">
	#ro2 {
		margin:1em;
	}
	#ro2 a {
		color:#666;
		text-decoration:none;
		width:10em;
		border:1px outset gray;
		background-color:#eee;
		margin:3px 0;
		padding:5px;
		text-decoration:none;
	}
	#ro2 a:hover {
		color:#666;
		text-decoration:none;
		border:1px inset gray;
		background-color:#eee;
		padding:6px 4px 4px 6px;
	}
</style>

<div id="ro2">
	<a href="#">ボタン１</a>　<a href="#">ボタン２</a>
</div>