申し訳ございません。
このサイトはお使いのブラウザに対応しておりません。
別のブラウザをご利用ください。

blog

home blog マウスホバーで色が変化するグラデーションボタン

マウスホバーで色が変化するグラデーションボタン

マウスホバーのアニメーションにはいろいろありますが、本記事ではグラデーション変化させる方法をご紹介します。

目次

  1. 実装目標の確認
  2. HTML & CSS コード例
  3. コード解説
  4. まとめ

実装目標の確認

初期状態では左側が明るいグラデーションで、マウスホバーした時には右側が明るいグラデーションに変化するようにします。

HTML & CSS コード例

<a href="" class="button">ボタン</a>
/* ボタン親要素 */
.button {
  display: block;
  width: 200px;
  height: 60px;
  line-height: 60px;
  color: #fff;
  text-align: center;
  text-decoration: none;
  border-radius: 30px;
  position: relative;
  z-index: 0;
}

/* 2つの疑似要素をボタンに重ねて配置 */
.button::before, .button::after {
  content: "";
  width: 100%;
  height: 100%;
  border-radius: 30px;
  position: absolute;
  top: 0;
  left: 0;
}

/* 初期状態で前面に出す疑似要素 */
.button::before {
  z-index: -1;
  transition: .5s;
  background: linear-gradient(to right, #00ccff,#0066ff);
}

/* ホバー時に見せる疑似要素 */
.button::after {
  z-index: -2;
  background: linear-gradient(to right, #0066ff,#00ccff);
}

/* ホバー時は前面のシートを透明にする */
.button:hover::before{
  opacity: 0;
}

コード解説

<a></a>に2つの疑似要素beforeafterを重ねて配置し、それぞれグラデーションを指定します。

初期状態ではbeforeが前面にあるためafterが隠れて見えない状態です。

マウスホバーでbeforeopacityを0にすることで、afterが見えるようになり、目標のアニメーションが実現します。

ちなみに以下のCSSだとtransitionが効かず、グラデーションがパッと切り替わってしまいます。

.button {
  transition: .3s;
  background: linear-gradient(to right, #00ccff,#0066ff);
}

.button:hover {
  background: linear-gradient(to right, #0066ff,#00ccff);
}

まとめ

いかがでしたか?

ホバーのアニメーションなんて楽勝楽勝!と思っていたら、ちょっと躓いてしまいました。

疑似要素の便利さを改めて感じました。

ぜひ、いろんな場面で活用してみてください。

最後までご覧いただきありがとうございました。