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

サンプル1

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

サンプル1

CSS

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

サンプル2

hover時にバックの色を変更

サンプル2

CSS

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

サンプル3

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

サンプル3

CSS

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