Search
  1. ロールオーバー・ボタンC〔擬似クラスを使用したカラフルなボタン〕
  2. ロールオーバー・ボタンA〔マウスON/OFF時の画像入替〕
  3. ロールオーバー・ボタンB〔マウスを乗せると凹むボタン〕

ロールオーバー・ボタン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="#">ボタン1</a> <a href="#">ボタン2</a>
</div>

関連コンテンツ

Q. このサイトの情報はお役に立ちましたでしょうか?

投票する 投票結果を見る

管理人に【web拍手】を送るweb拍手(1行メッセージも送れます♪)

pagetop