背景色が単色からグラデーションへ変化するホバーエフェクト

ホバーで背景色をグラデーションにする方法

Akira

福岡在住ウェブデザイナー。Web サイト制作に役立つ情報を「見やすさ」と「使いやすさ」にこだわり紹介しています。

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

ホバーしてね!

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

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

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

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

.example:hover {
  background-image: linear-gradient(to right top, #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: 1;
}

.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(to right top, #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: 1 を指定すること。値は 1 である必要はありません( 0 でもいい)が、とにかく z-index の指定が必要です。

何気なく見える単色からグラデーションに変化するホバーエフェクト。けれど CSS の指定は、そこそこ面倒です。