【CSS】リンクのクリック時に動作を付けてクリック感を出しました。

テーマを改変した時に、リンクのhover時のdecorationや色の変更などいらないなぁと思って、CSSの装飾をなくしました、

しかし、あまりにも素っ気ない感じだったので、クリック感が出るようにしました。

2つの動作を指定

今回のCSS編集では、マウスオーバー時に若干位置を上げ、クリック時に若干下げる事で、リンクにマウスオーバーしてる・クリックしてる感を出しました。

コードはいたって簡単です。

マウスオーバー時

a:hover {
	position:relative;
	bottom:1px;
}

クリック時

a:active{
	position:relative;
	top:1px;
}

これだけで、大分印象が変わってきます。

動作Sample　←マウスオーバー・クリックしてみてください。

おわり(・∀・)