ホームページ作成ガイド
リンクテキストをボタンのようにする
<html><head><title>リンクテキストをボタンのようにする</title>
<STYLE type="text/css">
<!--
a:hover { color: #FF0000; position: relative; top: 1px; left: 1px; }
-->
</STYLE>
</head>
<body>
</body>
</html>
テキストリンクにマウスオーバーすると、ボタンのようなひっこむ動きをするスタイルシートです。
<haed></head>で、リンクにマウスオーバーしたときの動作を定義しています（a:hover）。
color: #FF0000;は色、position: relative;は動きの基準位置、top: 1px;は上から1ピクセル動く、left: 1px;は左から1ピクセル動くという意味です。
つまりリンクにマウスオーバーしたときに、リンクテキストを下に1ピクセル、右に1ピクセル動かして、ボタンのように見せているのです。
ホームページ作成ガイド