コピペでできる!CSS3の素敵効果でテキストリンクを装飾する小技あれこれ

どのサイトでも見かけるテキストリンク。リンクのついたテキストにマウスオーバーすると文字色を変更する、というシンプルかつわかりやすい効果を実装しているWebサイトが多いかと思います。この装飾をもう少し変更できないかな?と思いCSSのみでプラスすることができるエフェクトをいくつか紹介します。

UIデザイン必携

目次

  1. ちょっと予備知識
  2. 文字色をふんわり変える
  3. 背景色をふんわり変える
  4. 文字をぼかす
  5. 光を放つグロー効果
  6. 背景を角丸に
  7. レインボーカラーに
  8. 拡大・縮小
  9. 角度を変える
  10. くるっと回転

1. ちょっと予備知識

今回はjQueryなどのJavaScriptを使わず、CSSのみで実装できる小技を集めています。その中でどの小技にも採用しているのが transition プロパティです。transitionプロパティは、時間の変化を操作するもので、今まではマウスオーバーするとパッと色が変わっていたところを、ふわっと色を変えたり、ぼよーんと角度を変えたりする際の「ふわっ」「ぼよーん」を再現してくれます。あれ、なんだか説明が変…。以下のサイトで詳しく知ることができます。

ベンダープレフィックス

古いサイトや記事では-webkit- -moz- といった、プロパティの先頭についているものがあるかと思います。これはベンダープレフィックスと呼ばれ、正式にはまだCSS3として採用されていないプロパティを、各ブラウザーに対応させるためにプロパティの先頭につけます。

  • -webkit- → Google Chrome、Safari
  • -moz- → Firefox
  • -o- → Opera
  • -ms- → Internet Explorer

border-radius プロパティをはじめ、いくつかのプロパティはすでにベンダープレフィックスなしで動作します。「CSS current work & how to participate(英語)」のオレンジ色のものはまだベンダープレフィックスを必要とするプロパティです。ベンダープレフィックスの要不要に迷ったら、一度チェックしておきましょう。

対応ブラウザー

今回紹介するエフェクトはGoogle Chrome、Safari、Firefox、Operaで動作します。IE9ではふんわり効果以外それとなく対応。 ※7. レインボーカラー はChrome、Safariのみ対応。

目次へ

2. 文字色をふんわり変える

a:hover で文字色を変更しているWebサイトが多いかと思いますが、 transition プロパティでふんわりとさせることができます。

サンプル

See the Pen
Basic CSS Transition – text color
by Mana (@manabox)
on CodePen.

CSS

a{
    color: #03c;
    transition: 0.5s;
}
a:hover {
    color: #0bd;
}

目次へ

3. 背景色をふんわり変える

文字色と同様に、背景色もふんわりと。ボタン扱いのリンクでも使える技ですね。

サンプル

See the Pen
Basic CSS Transition
by Mana (@manabox)
on CodePen.

CSS

a{
    color:#fff;
    background: #03c;
    text-decoration:none;
    padding:0 3px;
    transition: 0.5s;
}

a:hover {
    background: #39f;
}

目次へ

4. 文字をぼかす

text-shadow でふんわりと文字をぼかすことができます。数値を変更してぼかし具合を調整可。

サンプル

See the Pen
CSS Transition – Text Blur
by Mana (@manabox)
on CodePen.

CSS

a{
    color: #03c;
    transition: 0.5s;
}
a:hover {
    color: transparent;
    text-shadow: 0 0 5px #03c;
}

目次へ

5. 光を放つグロー効果

上記ぼかし効果では文字色を透明にし、影のみを表示しましたが、この効果では文字色を白にして、text-shadow で光っているように表示します。

サンプル

See the Pen
CSS Transition – Text Glow
by Mana (@manabox)
on CodePen.

CSS

a{
    color: #03c;
    transition: 0.5s;
}

a:hover {
    color: #fff;
    text-shadow: -1px 1px 5px #03c, 1px -1px 5px #03c;
}

目次へ

6. 背景を角丸に

こちらもボタン扱いのリンクに使えそうな効果。テキストリンクに背景色をつけると、デフォルトでは四角に表示されますが、こちらを角丸に変化させることができます。

サンプル

See the Pen
CSS Transition – Border Radius
by Mana (@manabox)
on CodePen.

CSS

a{
  color:#fff;
  background: #03c;
  text-decoration:none;
  padding:0 3px;
  transition: 0.5s;
}
a:hover {
  border-radius:30px;
}

目次へ

7. レインボーカラーに

背景色をグラデーションにし、-webkit-background-clip: text; でテキストに合わせてくりぬく方法。今のところChrome、Safariのみ対応しています。対応していないブラウザーでは背景色がレインボーカラーになります。

サンプル

See the Pen
CSS Transition – Text Rainbow Color
by Mana (@manabox)
on CodePen.

CSS

a{
    color: #03c;
    transition: 0.5s;
}

a:hover {
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-image: -webkit-linear-gradient(left, #f69, #fc0, #3c3, #09f, #96f);
    background-image: -moz-linear-gradient(left, #f69, #fc0, #3c3, #09f, #96f);
    background-image: -o-linear-gradient(left, #f69, #fc0, #3c3, #09f, #96f);
    background-image: -ms-linear-gradient(left, #f69, #fc0, #3c3, #09f, #96f);
}

目次へ

8. 拡大・縮小

リンクプロパティの a タグはインラインなので、display: inline-block; transform プロパティが使えるようにします。font-size で変化させてもいいのですが、その場合は他の文章まで影響されるので、ここでは scale を使いました。

サンプル

See the Pen
CSS Transition – Text Size
by Mana (@manabox)
on CodePen.

CSS

a {
  display: inline-block;
  color: #03c;
  transition: 0.5s;
}
a:hover {
  transform: scale(1.5, 1.5);
}

目次へ

9. 角度を変える

こちらも display: inline-block; 使用。数値によっては目障り感アップなので取り扱い注意。

サンプル

See the Pen
CSS Transition – Rotate Text Link
by Mana (@manabox)
on CodePen.

CSS

a {
  display: inline-block;
  color: #03c;
  transition: 0.5s;
}
a:hover {
  transform: rotate(10deg);
}

目次へ

10. くるっと回転

span で囲って、transform でくるっと回転する時に文字が見えなくなるので、 :aftercontent で擬似要素を表示して…と、かなりごにょごにょしています。コードも長く、手間がかかりますが、かっこいい効果ですね!

サンプル

See the Pen
CSS Transition – Rolling Text Link
by Mana (@manabox)
on CodePen.

HTML

<a href="#"><span data-title="Text Link">Text Link</span></a>

CSS

a {
  color: #03c;
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  perspective: 600px;
  -webkit-perspective-origin: 50% 50%;
  -moz-perspective-origin: 50% 50%;
  -o-perspective-origin: 50% 50%;
  -ms-perspective-origin: 50% 50%;
  perspective-origin: 50% 50%;
}
a span {
  display: block;
  position: relative;
  padding: 0 2px;
  transition: all 400ms ease;
  transform-origin: 50% 0%;
  -ms-transform-style: preserve-3d;
  transform-style: preserve-3d;
}
a:hover span {
  background: #03c;
  transform: translate3d(0px, 0px, -30px) rotateX(90deg);
}
a span:after {
  content: attr(data-title);
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  padding: 0 2px;
  color: #fff;
  background: #03c;
  transform-origin: 50% 0%;
  transform: translate3d(0px, 105%, 0px) rotateX(-90deg);
}

目次へ

CSSを少し付け加えるだけでかっこいい表現ができちゃいますね。中には数値によって目障りになる可能性大なものもあるので、やりすぎ注意ですw おすすめのエフェクトがあればぜひ教えてください!

シェアする

コメント

“Change Text Link Hover Effect Using CSS3” への6件のフィードバック

  1. Natalie より:

    Awesome collection! Thanks for sharing :D

  2. Ryan Yu より:

    Thanks for the great collection! Quite like the “Rolling Text Link”.

  3. Sayeman より:

    Thanks Mana, Your Articles are as cute as you are.

  4. Michael より:

    Awesome! Thanks for this. Helped me figure out a few things.

  5. pankaj kumar より:

    Nice effect. I just loved it, and going to use some of them in my project. Last effect doesn’t work on IE9. Can you please suggest any hack.

  6. No, unfortunately IE9 doesn’t support CSS3 transition. :(

ニュースレター

Web制作の最新情報やWebクリエイターボックスからのお知らせ、中の人の近況等を定期的にお送りいたします。 ぜひご登録ください!もちろん無料です! :)