【簡単コピペ♪】HTMLとCSSで文字リンクのホバーエフェクト

この記事はまとめ記事から、要点だけを抽出した時短バージョンです♪

一味違う！ホバーエフェクトはクリックしてもらいやすくなる魔法のスパイス✨️
「あれ…？」になる前の3つのコツ💡
おわりに
簡単コピペシリーズはこちら✨️

一味違う！ホバーエフェクトはクリックしてもらいやすくなる魔法のスパイス✨️

文字リンクはホームページを作る上で必ず使うものですが、ちょっとした工夫で見やすくなったり、また、多くの人がクリックしてその先を見てもらいやすくする、簡単だけど重要なテクニックの一つです。

左のメニューと右のメニュー、あなたならどっちをクリックしたくなりますか？

👇️ マウスオーバーしてみてください 👇️

About　 Service　 Blog　 Contact

👇️ マウスオーバーしてみてください 👇️

About　 Service　 Blog　 Contact

この記事ではそんな文字リンクのホバーエフェクトを“あるあるおしゃれ”な視点で4つご紹介します！
CodePenで見たい方はこちらからどうぞ😊

中央に向かって下線が消える

👇️ マウスオーバーしてみてください 👇️

A：ホバーすると中央に向かって下線が消えます

HTML

<a href="#" class="animated-link link-a">ホバーすると中央に向かって下線が消えます</a>

CSS

.animated-link {
  position: relative;
  text-decoration: none;
  transition: color 0.3s ease-out;
  color: #3d4070; /* 同じ色を指定 */
  padding-bottom: 4px;
}

.animated-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background-color: #3d4070; /* 同じ色を指定 */
  transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out, height 0.3s ease-in-out;
}

.link-a:hover::after {
  transform: scaleX(0);
  transform-origin: center;
}

下線が消えて文字色が変わる

👇️ マウスオーバーしてみてください 👇️

B：ホバーすると下線が消えて文字色が変わります

HTML

<a href="#" class="animated-link link-b">ホバーすると下線が消えて文字色が変わります</a>

CSS

.animated-link {
  position: relative;
  text-decoration: none;
  transition: color 0.3s ease-out;
  color: #3d4070; /* 同じ色を指定 */
  padding-bottom: 4px;
}

.animated-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background-color: #3d4070; /* 同じ色を指定 */
  transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out, height 0.3s ease-in-out;
}

.link-b:hover {
  color: #c0392b;
}

.link-b:hover::after {
  opacity: 0;
  transition-duration: 0.05s;
}

下から背景色が現れる

👇️ マウスオーバーしてみてください 👇️

C：ホバーすると下から背景色が現れます

HTML

<a href="#" class="animated-link link-c">C：ホバーすると下から背景色が現れます</a>

CSS

.animated-link {
  position: relative;
  text-decoration: none;
  transition: color 0.3s ease-out;
  color: #3d4070; /* 同じ色を指定 */
  padding-bottom: 4px;
}

.animated-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background-color: #3d4070; /* 同じ色を指定 */
  transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out, height 0.3s ease-in-out;
}

.link-c {
  padding-left: 5px;
  padding-right: 5px;
  margin-left: -5px;
  margin-right: -5px;
  border-radius: 3px;
  z-index: 0;
}

.link-c:hover {
  color: #ffffff;
}

.link-c:hover::after {
  height: 100%;
  z-index: -1;
}

ホバーすると左から背景色が現れます

👇️ マウスオーバーしてみてください 👇️

D：ホバーすると左から背景色が現れます

HTML

<a href="#" class="animated-link link-d">D：ホバーすると左から背景色が現れます</a>

CSS

.animated-link {
  position: relative;
  text-decoration: none;
  transition: color 0.3s ease-out;
  color: #3d4070; /* 同じ色を指定 */
  padding-bottom: 4px;
}

.animated-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background-color: #3d4070; /* 同じ色を指定 */
  transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out, height 0.3s ease-in-out;
}

.link-d {
  padding-left: 5px;
  padding-right: 5px;
  margin-left: -5px;
  margin-right: -5px;
  border-radius: 3px;
  z-index: 0;
}

.link-d::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #3d4070;
  z-index: -1;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease-in-out;
}

.link-d:hover {
  color: #ffffff;
}

.link-d:hover::before {
  transform: scaleX(1);
}

.link-d:hover::after {
  opacity: 0;
}

「あれ…？」になる前の3つのコツ💡

<a>タグ、デフォルトのスタイルを消しておく

position: relative;
text-decoration: none;

「position: relative;」を設定することで、このクラスをつけた要素にのみ下線を引くことができます。忘れると画面全体の左端に表示されるので要注意。親要素（aタグ）には必ず position: relative を忘れずに！「text-decoration: none;」で<a>タグのデフォルトの下線スタイルを消しています。

この記事のCSSにはすべて上記の2行を込みで掲載しているので、あとはホバーした時の文字色などをご調整ください。

transitionの意味は「じわっと動け！の予約」だと考える

「トランジション（Transition）」は、直訳すると「移行」、「変遷」、「移り変わり」という意味です。使われる場面によって少しニュアンスが変わりますが、基本的には「AからBへ切り替わる『つなぎ目』や『移動期間』」のことを指します。

映像などに携わる方はすぐにピンと来たはず…（私は意味がわかりませんでしたが…）。

このアニメーションっぽく徐々に変化させる…つまり、「じわっと動け！の予約をする命令文」、と考えるとシンプルです。コピペしてきた動きをちょっと変化させたい場合は、この『transition』をコードから探し出してください。

上記のコードを直訳すると『色が0.3秒かけて最初は早く終わりはゆっくりとした動き(で)アニメーションっぽく徐々に変化する』という意味です。

この『ease-out』と書かれた部分はアニメの『緩急』を指定する「イージング関数」と呼ばれるもので、全部で5種類あります。

linear	ずーっと同じ速度
ease	最初ゆっくり→加速→最後ゆっくり（デフォルト）
ease-in	だんだん速くなる
ease-out	最初が速くだんだん減速、一番よく使われる！
ease-in-out	easeより緩急がハッキリしてる

「イージング関数」は奥が深いのでここではおさらい程度の表面的な部分のみご紹介しますが、緩急の違いは下記を参考に体感してみてください。何回もやると目が痛くなるのでオススメしません（笑）

See the Pen イージング関数のサンプル by N Katsumata (@nk-codepen) on CodePen.

『transition: all』を使ってページが重くなったら細かく書く（大変だけど💦）

この「.animated-link」のコードをみていると「transition:』の後にやたら長いコードが記述されているのです。

.animated-link::after {
transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out, height 0.3s ease-in-out;
}

これは、省略して transition: all 0.3s ease-in-out; と書くこともできるのですが、そうすると使わないプロパティも全て読み込もうとするため、アニメーションを多用するページだと表示が重くなってまいます。

それを防ぐのがこの長い書き方なのです。

書き方は、『変化が起きるものを記述する』がコツとなります。例えば、下記のコードを見てください。

.my-button {
display: inline-block;
padding: 10px 20px;
border-radius: 5px;
background-color: #3498db; /* 青色 */
color: white;
transform: scale(1);

transition: all 0.3s ease; /* ← ここを変えます */
}

.my-button:hover {
background-color: #2980b9; /* 暗い青色に変化 */
transform: scale(1.1); /* 少し大きく変化 */
}

『.my-button』クラスのついたボタンをホバーした時にどうなるか後半に書かれていますね。
この部分です。

.my-button:hover {
background-color: #2980b9; /* 暗い青色に変化 */
transform: scale(1.1); /* 少し大きく変化 */
}

この後半の動きを確認して『transition: all 0.3s ease;』を書き換えます。
変化する対象は『background-color』と『transform』なので下記にすればOKという考え方です。

transition: background-color 0.3s ease, transform 0.3s ease;

先程のコードの全体が下記になります。

良い例 ✅

.my-button {
  display: inline-block;
  padding: 10px 20px;
  border-radius: 5px;
  background-color: #3498db;
  color: white;
  transform: scale(1);

  transition: background-color 0.3s ease, transform 0.3s ease; /* ← こうなります */
}

.my-button:hover {
  background-color: #2980b9;
  transform: scale(1.1);
}

確認が必要だったり、長くて面倒なのが難点ですが、覚えておいて損はないテクニックなので、もし、ページの軽量化業務に携わる際は、ぜひお試しくださいね。