ホバー時に背景色を単色からグラデーションにする CSS の指定方法

私がよく使っているのが、下のボタン。

単色の背景色が、グラデーションに変わるホバーエフェクト。ホバーした時に「おっ！」となるから好き。

ただ、このホバーエフェクトは、CSS の指定に注意が必要です。

例えば、下記の指定はダメなやり方。

.example {
  background-color: #039be5;
  transition: .3s cubic-bezier(.4, 0, .2, 1);
}

.example:hover {
  background-image: linear-gradient(45deg, #039be5, #00b7ee, #00d0e8, #00e7d8, #7afac4);
}

この指定をしたのが、下のボタンです。

transition を指定していますが、背景色が瞬時に切り替わります。ふわっとしたホバーエフェクトにはなりません。

原因は、background-image には transition が効かないから。

ふわっとしたホバーエフェクトにするには、::after 疑似要素と親要素への CSS の指定が必要です。

例えば HTML は、このようなものとします。

<div class="example-wrap">
  <a class="example-button" href="#">ボタンだよ</a>
</div>

そして CSS は、このように指定します。

.example-wrap {
  position: relative;
  z-index: 0;
}

.example-button {
  background: #03a9f4;
  border-radius: 2px;
  box-shadow: 0 2px 3px 0 rgba(0, 0, 0, .11);
  color: #fff;
  display: inline-block;
  padding: 16px 24px;
  position: relative;
  transition: .3s cubic-bezier(.4, 0, .2, 1);
}

.example-button:hover {
  background: transparent;
}

.example-button:after {
  background: linear-gradient(45deg, #039be5, #00b7ee, #00d0e8, #00e7d8, #7afac4);
  border-radius: 2px;
  bottom: 0;
  content: '';
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  z-index: -1;
}

この指定をしたのが、下のボタンです。

ポイントは 2 つ。

1 つ目は、ボタンの ::after 疑似要素に対し、グラデーションを指定すること。ボタン自体はホバー時に背景色を透明にし、後ろに隠した ::after 疑似要素を見せるようにします。

2 つ目は、z-index: -1 で後ろに隠した ::after 疑似要素がホバー時に見えるように、親要素（先祖要素でも可）に対し z-index: 0 を指定すること。値は 0 である必要はありません（0 以上であれば可）が、とにかく z-index の指定が必要です。

このように、単色からグラデーションに変化するホバーエフェクトには少しだけ手間がかかります。