[使えるCSSテクニックVol.2] 第 9 回 CSS だけで実現する画像ボタンのロールオーバー

第 9 回目は「 CSS だけで実現する画像ボタンのロールオーバー」です。

javascriptを使用せずに、ロールオーバー効果をCSSのみでやってみましょう。

以下のボタン画像にマウスをのせてみてください。

サンプル1. 位置をずらす

XHTML

<p class="sample1"><a href="#">
<img src="hogehoge" alt="ボタン" width="200" height="50" /></a></p>

CSS

.sample1 a:hover {
	position: relative;
	top: 1px;
	left: 1px;
}

positionプロパティを使って位置をずらします。

 

サンプル2. 透過させる

XHTML

<p class="sample2"><a href="#">
<img src="hogehoge" alt="ボタン" width="200" height="50" /></a></p>

CSS

.sample2 a:hover {
	opacity: 0.7; /* Opera・Safari */
	-moz-opacity:0.7; /* Firefox */
	filter: alpha(opacity=70); /* IE */
	zoom: 1; /* IE */
}

各ブラウザにてプロパティが違うので、対応するプロパティで透過させます。なおIEの場合は、インライン要素に透過処理をさせる場合、HasLayoutプロパティもtrueに設定する必要があるのでzoomを使っています。

 

サンプル1. 背景色をかえる

XHTML

<p class="sample3"><a href="#">
<img src="hogehoge" alt="ボタン" width="200" height="50" /></a></p>

CSS

.sample3 a:hover img {
	background-color: #FF6600;
}

背景色を設定してやります。なお色が変わる部分については、ボタン画像の方で透過処理して書き出すのがポイントです。