CSSでボタンのロールオーバーをデザインする【1】：CSS 3分コーディング

CSS（スタイルシート）の色々なテクニックや知識を紹介していく「CSS 3分コーディング」のコーナーです。

はじまりはじまり。

今回のテーマ：CSSでボタンのロールオーバーをデザインする【1】

マウスカーソルを重ねたときに、デザインが変わるボタンをCSSだけでデザインする方法をご紹介します。

:hover疑似クラスとbackground-imageを使います。CSSの基礎知識がある方やCSS講座を受けていただいた方ならさくっとお気付きかもしれませんが、ちょっとした工夫があったりします。先日の講座でもご質問いただいたので改めてご紹介します。

まず、根本の発想は「マウスカーソルが重なったときにbackground-imageで画像を切り替える。」わけですが、「別の画像ファイル」ではなく、「同じ画像ファイル」を使います。

ポイントは、背景画像をずらす！です。

このようにします。

<ul>
	<li><a href="#">Link 1</a></li>
	<li><a href="#">Link 2</a></li>
	<li><a href="#">Link 3</a></li>
</ul>

ul {
	margin: 0px;
	padding: 0px;
	list-style:none;
}
ul li {
	/* li要素を横に並べる */
	float:left;
	/* 1行の高さ＝背景の高さにして文字を縦軸中央に */
	line-height: 45px;
}
ul li a {
	 /* a要素をブロックに */
	display: block;
	/* 背景画像と同じ幅高さ指定 */
	height: 45px;
	width: 160px;
	color: #666;
	/* 文字を横軸中央に */
	text-align: center;
	text-decoration: none;
	/* 背景画像指定 X:0 Y:0 繰り返し無し */
	background: url(img/button_bg.png) 0 0 no-repeat;
}
ul li a:hover {
	color:#FFF;
	/* 背景画像指定 X:0 Y:-45px 繰り返し無し */
	background: url(img/button_bg.png) 0 -45px no-repeat;
}