Topスタイルシートの基本リンク > 画像リンクでボタンを作成

画像リンクでボタンを作成

スタイルシートの色やボーダーの設定だけではどうしても淡白だ…そう思ったときは画像のボタンを作る事になると思います。
背景部分は画像、文字部分はテキストのボタンについて説明します。


まずは、通常時のボタン背景とカーソルが重ねられたときの背景を作ります。
※必ず同じ大きさで作ってください。


<p class="navi">

<a href="a.html">A</a>

<a href="b.html">B</a>

<a href="c.html">C</a>

</p>


p.navi a{
display:block;
width:100px;
height:30px;
float:left;
background-image:url(○○.gif);
background-repeat:no-repeat;
}

p.navi a:hover{
background-image:url(○○2.gif);
}

■p.navi aの設定について
「background-image:url(○○.gif);」で画像の設定を、「background-repeat」で画像がリピートされないように設定しています。
「height」でボタンの高さを指定しています(line-heightだと高さが変化するので注意)
※他の項目については、リンクでボタンを作成する:スタイルシートメモを参照してください。
■p.navi a:hoverの設定について
変更する背景画像を指定します。

「画像リンクでボタンを作成」関連本

Akasa Rira
みつけたきせき