CSSでリンクタグをいろんなパターンデザインしてみる

リンクタグのhover後の動きっていろいろパターンってあると思うですが、よく使われている用なパターンをいくつか作ってみたので、参考になればと思います。

hover時にテキストにアンダーラインが出ると言う一番よくあるパターンです。

.sample1 a	{
	text-decoration: none;
	color: #2D88B3;
}
.sample1 a:hover	{
	text-decoration: underline;
	color: #2D88B3;
}

hover時にバックの色を変更

.sample2 a	{
	display: block;
	width: 100%;
	color: #2D88B3;
}
.sample2 a:hover	{
	background: #000;
	color: #2D88B3;
}

hover時に押した用な動きをつける

.sample3 a	{
	text-decoration: none;
	color: #2D88B3;
}
.sample3 a:hover {
	position: relative;
	top: 1px;
	left: 1px;
}

CSSリファレンス、(X)HTML、Movable Typeその他Webサイト制作に関する役立つ情報を掲載します！