テキストリンクをボタンのように配置したい

テキストリンクを配置したい場合に、デザイン的にリンクボタンであることを直感的に見せたい場合、背景のスタイルを指定して実現出来ますが、いくつか注意しなければならない点もありますので確認していきましょう。

 

DEMO

 

まずは、下記のようなhtmlコードでテキストリンクを配置するとします。

 

そしてテキストリンクの背景に下のような背景画像とホバー用の画像を利用します。

button-bg.jpg

button-bg_ov.jpg

 

背景に画像を指定するにはCSSの「background」で指定します。

 

次に、このままだとテキストのエリアだけにリンクが貼られている状態なので、画像のどこにカーソルが重なってもリンクが適用されるように「a要素」に「display:block;」を指定します。

 

ただし、「a要素」をブロックレベル要素に変更した場合、widthプロパティの宣言がないとIE6/7で表示がおかしくなることがあるので、「zoomプロパティ」の宣言も加えます。

 

さらに、テキストリンクを「#FFF」などで白文字に指定している場合など、、何らか原因で背景画像が表示されなかった場合にページ背景に埋もれて見えなくなってしまう可能性があるので、「a要素」に背景色を指定しておきます。

 

これでテキストリンクがボタンのようなデザインになります。