[DEMO] ピュアCSSで実装するDKIRを応用した画像ボタンのロールオーバー効果 [詳細]

CSS のみで実装するロールオーバー効果のデモです。
CSS 側で画像のサイズを指定しなくてもいいのでとてもシンプルに実装できます。
分かりづらいですが、「HOME」だけ横幅が若干広くなっていますが、CSS 側で特に指定することなくしっかりとロールオーバーの効果があるのが分かります。
ただ、今回は背景画像に CSS Sprite を使用しているので、そのためのサイズ指定が入ってしまっていますが、CSS Sprite を利用しないのであれば計算の必要はありません。

また、hover 時以外でも閲覧中のカテゴリを明示するような場合にも使用できます。(Product の部分が選択状態になっています)