【Labs】CSSでテキストリンクや画像リンクを装飾

こんにちは（・∀・）

CSSを使用したサンプルをご紹介します。今回はテキストリンクや画像リンクを装飾するサンプルです。

CSSでテキストリンクや画像リンクを装飾

1. マウスオーバーでテキストリンクの色を変更
2. マウスオーバーでテキストリンクにアンダーライン
3. マウスオーバーでテキストリンクの色を変えて動かす
4. マウスオーバーで画像リンクを動かす
5. CSSでテキストリンクに画像を表示

1. マウスオーバーでテキストリンクの色を変更

HTML

<a href="#">マウスオーバーでこのテキストリンクの色が変わります。</a>

CSS

a:hover {
  color: #f00;
  text-decoration: none;
}

Result

2. マウスオーバーでテキストリンクにアンダーライン

HTML

<a href="#">マウスオーバーでこのテキストリンクにアンダーラインがでます。</a>

CSS

a:hover {
  text-decoration: underline;
}

Result

3. マウスオーバーでテキストリンクの色を変えて動かす

HTML

<a href="#">マウスオーバーでこのテキストリンクの色が変わって動きます。</a>

CSS

a:hover {
  color: #f00;
  position: relative;
  top: 1px;
  left: 1px;
  text-decoration: none;
}

Result

4. マウスオーバーで画像リンクを動かす

HTML

<a href="#"><img src="logo.png" alt="サンプル"></a>

CSS

a:hover {
  position: relative;
  top: 1px;
  left: 1px;
}

Result

5. CSSでテキストリンクに画像を表示

HTML

<a href="#" class="left">戻る</a>
<a href="#" class="right">進む</a>

CSS

a.right {
  background: url("right.png") no-repeat center right;
  margin-right: 1px;
  padding-right: 20px;
}
a.left {
  background: url("left.png") no-repeat center left;
  margin-left: 1px;
  padding-left: 20px;
}

Result