テキストリンクのホバー時に使えるエフェクト・デザインサンプル 15

文章内のテキストリンクやテキストのみで実装しているようなナビゲーションリンクなどで使えそうなホバーエフェクト・デザインのサンプルです。
文字数が変化したり改行が頻繁に入るような場所などでは正直使い辛くて利用できる場面が限られてしまうものも多いのですが、シンプルなHTMLとCSSで様々な見せ方ができます。

サンプルの中で特にdisplay: inline-block;を記述しているタイプのものが意図しない箇所で改行されたり、逆にされなかったりということがあるので注意して下さい。
実際にどのような動きになってしまうのかはブラウザを縮めて確認してもらったり、または自身で環境を用意して実装・確認をしてもらうとよりわかりやすいと思います。

ここで紹介するエフェクトは、基本的に<a href="#">リンク</a>のようなHTMLに対して実装したものになります。
また、サンプルコードに含まれていませんがデモ用のデフォルトスタイルとして、colorとtext-decoration: none;を別途指定してあります。

文字色がふわっと変化

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。

よくあるホバー時にテキストカラーが変化する動きにtransitionを使ってふわっと変化させるようにしたもので、a要素に対してCSSは下記のように記述します。

a {
  transition: color .3s;
}

文字色＋背景色がふわっと変化

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。

先ほどのテキストカラーが変化する動きに加えて背景色も変化するようにし、同じくtransitionを使ってそれらがふわっと変化させるようにしたものです。
a要素に対してCSSは下記のように記述します。

a {
  padding: 0 .3em;
  transition: all .3s;
}
a:hover {
  color: #fff;
  background-color: #2ecc71;
}

文字が拡大

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。

ホバー時に文字が少し拡大するもので、a要素に対してCSSは下記のように記述します。

a {
  display: inline-block;
  transition: .3s;
  -webkit-transform: scale(1);
  transform: scale(1);
}
a:hover {
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}

文字が一瞬拡大

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。

先ほどはホバーしている間拡大していましたが、こちらはホバー時に一瞬だけ拡大するようにしたもので、a要素に対してCSSは下記のように記述します。

a {
  display: inline-block;
}
a:hover {
  -webkit-animation: zoom .3s;
  animation: zoom .3s;
}
@-webkit-keyframes zoom {
  50% {
    -webkit-transform: scale(1.05);
  }
}
@keyframes zoom {
  50% {
    transform: scale(1.05);
  }
}

文字が傾く

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。

ホバー時に文字が傾くようにしたもので、a要素に対してCSSは下記のように記述します。

a {
  display: inline-block;
  transition: .3s;
}
a:hover {
  transform: rotate(5deg);
}

文字が縦回転

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。

ホバー時にテキストが縦方向にクルクルと回転するようにしたものです。
実装する際のHTMLとCSSは下記のように記述します。

<a href="#"><span>リンク</span></a>

a,
a span {
  display: inline-block;
}
a span {
  transition: .5s;
}
a:hover span {
  -webkit-transform: rotateX(360deg);
  transform: rotateX(360deg);
}

3D

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。

ホバー時の動きにボックスが回転しているような3D表現を用いたものです。
実装する際のHTMLとCSSは下記のように記述し、span要素に記述してあるようにdata属性を利用します。

<a href="#"><span data-text="リンク">リンク</span></a>

a {
  display: inline-block;
  -webkit-perspective: 1000px;
  perspective: 1000px;
  -webkit-perspective-origin: 50% 50%;
  perspective-origin: 50% 50%;
  vertical-align: bottom;
  overflow: hidden;
}
a span {
  display: inline-block;
  position: relative;
  padding: 0 .3em;
  transition: .4s;
  -webkit-transform-origin: 50% 0%;
  transform-origin: 50% 0%;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
}
a span:after {
  display: inline-block;
  position: absolute;
  left: 0;
  top: 0;
  content: attr(data-text);
  padding: 0 .3em;
  color: #fff;
  background-color: #2ecc71;
  -webkit-transform-origin: 50% 0%;
  transform-origin: 50% 0%;
  -webkit-transform: translate3d(0, 105%, 0) rotateX(-90deg);
  transform: translate3d(0, 105%, 0) rotateX(-90deg);
}
a:hover span {
  background-color: #2ecc71;
  -webkit-transform: translate3d(0, 0, -30px) rotateX(90deg);
  transform: translate3d(0, 0, -30px) rotateX(90deg);
}

背景色を左からスライド表示

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。

ホバー時に背景色が左からスライドされていくような見た目にしたもので、a要素に対してCSSは下記のように記述します。

a {
  padding: 0 .3em;
  background-image: linear-gradient(to right, rgba(0, 0, 0, 0) 50%, rgba(46, 204, 113, 1) 50%);
  background-position: 0 0;
  background-size: 200% auto;
  transition: .3s;
}
a:hover {
  background-position: -100% 0;
  color: #fff;
}

ちなみにここで紹介しているのは左からのものですが、ホバー時のスタイルで記述しているbackground-position: -100% 0;の箇所をbackground-position: 100% 0;に変更すれば右からスライドする形に変更できます。

背景色を下からスライド表示

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。

こちらは先ほどの背景色がスライドしてくるのを下から表示されるようにしたもので、a要素に対してCSSは下記のように記述します。

a {
  padding: 0 .3em;
  background-image: linear-gradient(rgba(0, 0, 0, 0) 50%, rgba(46, 204, 113, 1) 50%);
  background-position: 0 0;
  background-size: auto 200%;
  transition: .3s;
}
a:hover {
  background-position: 0 100%;
  color: #fff;
}

一文字ずつ回転

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。

こちらは正直使い勝手も悪く、もっとスマートに実装する方法がありそうですが、ホバー時に文字が一文字ずつ回転するエフェクトを実装したものです。
実装にはまずHTMLで適用したい文字列を下記のように一文字ずつspan要素で括ります。

<a href="#"><span>リ</span><span>ン</span><span>ク</span></a>

上記サンプルソースでは3文字だけなのでまだ楽ですが、これが10文字、20文字となってくるとさすがにいちいちspanで括っていくのは面倒なので、もし実際に使うとなった場合はJavaScriptを使用して一文字ずつspanで括るように指定するのが手っ取り早くて良いと思います。

CSSは下記のように記述し、ホバー時にtransform: rotateY(360deg);で回転するようにしているのですが、その開始時間をtransition-delayで少しずつずらしていくことで一文字ずつパラパラと回転しているような見せ方ができます。
サンプルソースでは5文字分までしか記述していませんが、もっと文字数がある場合は増やしていく必要があり、Sassを利用している環境であれば@forを使うのが管理・記述ともに楽です。

a {
  transition: .3s;
}
a span {
  display: inline-block;
}
a:hover span {
  -webkit-transform: rotateY(360deg);
  transform: rotateY(360deg);
  transition: .6s;
}
a:hover span:nth-of-type(1) {
  -webkit-transition-delay: .02s;
  transition-delay: .02s;
}
a:hover span:nth-of-type(2) {
  -webkit-transition-delay: .04s;
  transition-delay: .04s;
}
a:hover span:nth-of-type(3) {
  -webkit-transition-delay: .06s;
  transition-delay: .06s;
}
a:hover span:nth-of-type(4) {
  -webkit-transition-delay: .08s;
  transition-delay: .08s;
}
a:hover span:nth-of-type(5) {
  -webkit-transition-delay: .10s;
  transition-delay: .10s;
}

 ・
 ・
 ・

アンダーラインがフェードイン

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。

擬似要素を利用してアンダーラインとなる要素を作成・非表示にしておき、ホバー時にそれをフェードインさせるというもので、a要素に対してCSSは下記のように記述します。

a {
  position: relative;
  display: inline-block;
  transition: .3s;
}
a::after {
  position: absolute;
  bottom: .3em;
  left: 0;
  content: '';
  width: 100%;
  height: 1px;
  background-color: #2ecc71;
  opacity: 0;
  transition: .3s;
}
a:hover::after {
  bottom: 0;
  opacity: 1;
}

左からラインが伸びる（下）

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。

同じく擬似要素を利用してアンダーラインとなる要素を作成してホバー時にそれをアニメーションさせたもので、ホバー時に左からラインが伸びてくるようにしたもので、a要素に対してCSSは下記のように記述します。

a {
  position: relative;
  display: inline-block;
  transition: .3s;
}
a::after {
  position: absolute;
  bottom: 0;
  left: 0;
  content: '';
  width: 0;
  height: 1px;
  background-color: #2ecc71;
  transition: .3s;
}
a:hover::after {
  width: 100%;
}

左右からラインが伸びる（上下）

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。

こちらはラインを下だけでなく上にも配置したもので、さらに上ラインは左から、下ラインは右からそれぞれ伸びるようにしたものです。
a要素に対してCSSは下記のように記述します。

a {
  position: relative;
  display: inline-block;
  transition: .3s;
}
a::before,
a::after {
  position: absolute;
  content: '';
  width: 0;
  height: 1px;
  background-color: #2ecc71;
  transition: .3s;
}
a::before {
  top: 0;
  left: 0;
}
a::after {
  bottom: 0;
  right: 0;
}
a:hover::before,
a:hover::after {
  width: 100%;
}

中央からラインが伸びる（下）

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。

同じく擬似要素を利用してアンダーラインとなる要素を作成したもので、ホバー時に中央から左右へとラインが伸びてくるようにしたもの、a要素に対してCSSは下記のように記述します。

a {
  position: relative;
  display: inline-block;
  transition: .3s;
}
a::after {
  position: absolute;
  bottom: 0;
  left: 50%;
  content: '';
  width: 0;
  height: 1px;
  background-color: #2ecc71;
  transition: .3s;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
}
a:hover::after {
  width: 100%;
}

中央からラインが伸びる（上下）

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。

こちらはラインを下だけでなく上にも配置したもので、a要素に対してCSSは下記のように記述します。

a {
  position: relative;
  display: inline-block;
  transition: .3s;
}
a::before,
a::after {
  position: absolute;
  left: 50%;
  content: '';
  width: 0;
  height: 1px;
  background-color: #2ecc71;
  transition: .3s;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
}
a::before {
  top: 0;
}
a::after {
  bottom: 0;
}
a:hover::before,
a:hover::after {
  width: 100%;
}

以上、テキストリンクのホバー時に使えるエフェクト・デザインサンプルでした。
下記も同じようにテキストリンクで利用できそうなホバーエフェクトがまとめらているエントリーやサンプルになり、今回紹介している以外の動きもまとめられています。
また、一部エフェクトの実装方法を参考にもさせてもらいました。