マウスオーバーしたときにリンクを1px右下にずらす

リンク部分にマウスを載せた際にテキストの色を変えたり、下線を付けたり（外したり）するのが一般的です。これはリンクである事をユーザに伝える為と、リンクに注目してもらいクリックを促す目的があります。

他にもリンクのアピール法として、マウスを載せた際にリンク部分を右下にずらすという方法も良く取られます。特にアフィリエイトサイトでは頻繁に使われています。

リンクの色が変わるので分かりにくいかもしれませんが、マウスを載せた際に右下に少しずれるのが分かると思います。

イメージリンクにするとこんな感じになります。こちらの方が右下にずれているのが分かりやすいですね。イメージの場合、右下にずらす事でボタンを押したような印象を与える事ができます。

リンクを下にずらすCSS

a:hover { top:1px; left:1px; position:relative; }

記述方法はいくつかあると思いますが、要するにマウスを載せた時（a:hover）に上と左から1px離せば良いわけです。

a:hoverで指定してしまうと、サイト内にある全てのリンクがホバー時に右下にずれる事になりますので、特定のリンクのみを指定したい場合には、classやidを指定すると良いでしょう。

こういった少しの手間でリンクのクリック率が上がる事もありますので、興味を持った方は導入してみてください。ちなみに私はこの動きがあまり好きではないので使った事はありません。