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;
}

Download

Domo Page

Comment Form

※コメントが認証されるまで、コメントは反映されません。ご了承くださいませ。


(公開されません)
 
Captcha

画像の中に見える文字を入力してください。

page top へ

Sponsor

  • heteml
  • Movable Type

Category

Recent Article

2011 04-05
iPhone スマートフォンサイトのデザインのまとめ
2011 04-04
スマートフォン対応にしてみました
2011 04-01
CSS3 要素を透明に出来る Opacity と RGBa の使い方
2011 03-31
サイトリニューアルしました
2010 12-01
CSS3 でボタンを作る為のテクニック、サンプル集
2010 11-24
綺麗でリッチなフッターデザイン集のまとめ 60
2010 11-18
緑と黒色を使った Webデザインのサイト 25
2010 11-10
知っておいた方が便利なエクセルの知識

Recent Comments

Archive

2011年
2010年
2009年
2008年

Related Article