画像-1 
画像-2
ロールオーバーボタンはジャバスクリプト（JavaScript）が用いられることが多いですが、
ＣＳＳを使うと、より簡単にロールオーバーリンクボタンの設定ができます。
この例で使用する素材は縦横の大きさが同じボタン台２枚です。
| カーソルがのっていない時 | 画像-1 |
| カーソルがのっている時 | 画像-2 |
| ロールオーバーを指定したもの | リンクA オンマウスで1から2に変化 |
例に用いた素材画像の掲載頁はこちら（GIF８０ｘ２０サイズつや消し金属のボタン台）
| CSS この例では、リンクのAタグに「rolov01」と管理人星田が勝手に名づけたスタイルを適用することにしました。 これをHTMLの<HEAD>と</HEAD>の間に挿入します。 |
|
| A.rolov01 { display:block; width : 80px; height : 20px; background-image : url(画像1-----); text-align:center; padding-top:3px; } A:HOVER.rolov01{ background-image : url(画像2-----); } |
width（幅）とheight（高さ）は、 使用する素材と同じにします。 この例では８０ｘ２０の値を入れてあります。 文字を表示させる位置は任意で様々な値を入れてみます。 この例では、自動で画像の中央位置に、上から３ｐｘずらして表示することにしてあります。 |
| HTMLでA要素にスタイルを指定します。 例 <A class="rolov01" href="リンク先のＵＲＬ">リンクA</A> |
これを用いたボタンとその応用例が以下のページにありますので、参考にしてください。