浮き上がるリンク

borderプロパティを使って、浮き出すように見えるリンクの作り方です。 結構おもしろいですよ。

テクニック使用前

テクニック使用後

次のようなスタイルシートを書いて、適用させたいAタグにclass設定をするだけです。

a.sample{
    text-decoration:none;
}
a:hover.sample{
    color:#CC0000;
    border-width:0px 1px 1px 0px;
    border-style:solid;
    border-color:#990000;
    position:relative;
    top:-2px;
    left:-2px;
}

カーソルを合わせたときだけ反応するように、hovoerにだけいろいろ細工をします。
右と下にborderを、position:relativeを使って左上に移動するように設定すると、
まるでボタンが浮き出すかのように見せることができます。

下線を消してしまっているので、リンクと本文の見分けがちょっとつきにくくなります。
使うときは気をつけてください。

---

使いこなすための＋α

左と上にborderを設定し、右下に動かすとへこんだように見せることができます。
これを使って浮き出てへこむボタンを作ってみましょう。

最初のサンプルに、新たにa:activeを加えます。

a.sample{
    text-decoration:none;
}
a:hover.sample{
    color:#CC0000;
    border-width:0px 1px 1px 0px;
    border-style:solid;
    border-color:#990000;
    position:relative;
    top:-2px;
    left:-2px;
}
a:active.sample {/*クリック中の色*/
    color:#CC0000;
    border-width:1px 0px 0px 1px;
    border-style:solid;
    border-color:#990000;
    position:relative;
    top:2px;
    left:2px;
    padding-left:3px;
}

activeの左と上にborderを設定し、右下に動かします。
これでクリックするとへこんだように見えます。
padding-left: 3px;を指定しているのは、無いと枠線と文字がかぶってしまうからです。
枠線と文字との間に余白を取りたいときはpaddingを利用してください。

最初からボタンのように見せかけて、押すとへこむボタンでもいいかもしれませんね。

---