ロールオーバーリンク２

ロールオーバーリンク１にさらに手を加えたサンプルをいくつか紹介します。
画像なしの限界を極めるのもいいかもしれませんね。

ボタンのようにしてみる

浮き上がるリンクと組み合わせてみました

a.sample{
    display:block;
    background-color:#FFFFA7;
    padding:0.5em 1em;
    width:80px;
    height:15px;
    border:solid 3px;
    border-color:#FFFFFF #CC9966 #CC9966 #FFFFFF;
    text-decoration:none;
}
a:hover.sample{
    background-color:#FFFFD5;
}
a:active.sample{
    background-color:#FFFFD5;
    border-color:#CC9966 #FFFFFF #FFFFFF #CC9966;
}

押すとへこんだように見えます。border-colorの選び方がポイントになるでしょう。

伸びるリンク

hoverとactiveのwidthを変えて、文字を右寄せにしてみました。

a.sample1{
    display:block;
    background-color:#FFFFA7;
    padding:0.5em 1em;
    width:80px;
    height:15px;
    border:solid 3px;
    border-color:#FFFFFF #CC9966 #CC9966 #FFFFFF;
    text-decoration:none;
}
a:hover.sample1{
    background-color:#FFFFD5;
    width:120px;
    height:15px;
    text-align:right;
}
a:active.sample1{
    background-color:#FFFFD5;
    width:120px;
    height:15px;
    text-align:right;
}

左側に寄せたい場合は、margin-left:-**px;のようにwidthの差の分だけ−で指定すればOKです。

heightに指定すれば上や下に伸ばすことができます。

ちょっと遊んでみる

別に遊ばなくてもいいんですけどね・・・。
テーブルタグと組み合わせるとルーレットみたいなのもできます。

a.sample2{
    display:block;
    background-color:#FFFFFF;
    color:#FFFFFF;
    padding:0.5em 1em;
    width:50px;
    height:50px;
}
a:visited.sample2{
    color:#FFFFFF;
}
a:hover.sample2{
    background-color:#FFCC99;
    color:#000000;
}
td{
    border:solid 3px;
    border-color:#CC9966;
    text-align:center;
}

背景色と文字色を同じにすると、カーソルを合わせるまで読めないようにできます。
あまりおすすめはしませんが。

---

使いこなすための＋α

アイディアしだいで何でもできるでしょう。 他にもまだあるのですが、今回はページが長くなってしまったので、ロールオーバー３でやりたいと思います。