0

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

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

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

 

DEMO

 

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

 

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

button-bg
button-bg.jpg

button-bg_ov
button-bg_ov.jpg

 

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

 

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

 

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

 

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

 

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

 


 

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

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