使ってみよう！スタイルシート

画像無しでシンプルCSSボタンを作ることに成功したら、
今度はちょっと立体的なボタンにチャレンジ。

文字の長さに合わせてボタンをいくつも作るのは面倒なので、
横幅が自在に伸び縮みするボタンを作ってみましょう。

軽いし、制作時間が短縮できるし、文字を変えればいろいろ使いまわせる！

/*左画像の設定　leftにする*/
a.kadomaru{
	padding:6px 0px 5px 20px;
	background:url(../image/サンプル_かどまる左.gif)no-repeat left;
	text-decoration:none;}

a:hover.kadomaru{
	background:url(../image/サンプル_かどまる左hover.gif)no-repeat left;}


/*spanに右画像の設定　rightにする*/	
a.kadomaru span{padding:6px 20px 5px 0px;
	background:url(../image/サンプル_かどまる右.gif)no-repeat right;}
	
a:hover.kadomaru span{
	background:url(../image/サンプル_かどまる右hover.gif)no-repeat right;}
	

HTML

<a class ="kadomaru" href="#"><span>リンク</span></a>
<a class ="kadomaru" href="#"><span>詳しい説明ページへ移動する</span></a>

練習用にどうぞ
　　　　

hover時の画像