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

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

ホバーしてね！

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

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

例えば、下記の指定では上手くいきません。

.example {
  background-color: #039be5;
  transition: 0.3s cubic-bezier(0.4, 0, 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 rgb(0, 0, 0, 0.11);
  color: #fff;
  display: inline-block;
  padding: 16px 24px;
  position: relative;
  transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

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

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

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

ボタンだよ

ポイントは 2 つあります。

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

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

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