【ボタン集】ホバーしたらグラデーション背景になるボタン

2025年1月18日

今回はボタン集、「ホバーしたらグラデーション背景」にしますよ！

というわけで今回はホバーしたらグラデーション背景になるボタンをご紹介します！
ホバーでボタンの背景色を変えるのはよくありますし、難しいことはありませんが
グラデーションにするには一工夫必要です！

ホバーしたらグラデーション背景にする

まずはホバー時に普通に背景色を変えるのと、グラデーションにするのはどう違うのでしょうか？
まずは普通に実装して違いを見てみましょう！

ボタンを見比べる

まずは普通に赤背景にしてみましょう。

See the Pen ボタンをホバーグラデーションにする（普通背景） by そす (@Sosgoyo) on CodePen.

まあ、何も難しいことはしてませんね。
ホバー時に背景と文字色を変えています。
変更時にはじわっと変化するように「transition: .3s;」で変化に0.3秒かかるようにしています。

では、上記のコードの背景色をグラデーションに変化させてみましょう！

See the Pen ボタンをホバーグラデーションにする（普通背景） by そす (@Sosgoyo) on CodePen.

どうでしょう？
背景はグラデーションに変化してますが、「transition: .3s;」が効いてませんね。

背景をグラデーションにする「background: linear-gradient();」には「transition:;」が効かないようです。

ではどうするか？ここからが一工夫になります。

疑似要素を使う

今回は、背景を疑似要素にして「opacity」を変化させて再現してみます。
さっそく見てみましょう。

See the Pen ボタンをホバーグラデーションにする（グラデーション背景失敗） by そす (@Sosgoyo) on CodePen.

しっかりホバー時のアニメーションが効いてますね！
では、コードを見ていきましょう。

【HTML】

<div class="container">
  <a href="" class="btn"><span>一覧を見る</span></a>
</div>

HTMLは変わりません。

【CSS】

.btn {
  position: relative;
	display: inline-block;
  min-width: 240px;
  border-radius: 28px;
  padding: 22px 45px;
  border: 1px solid #000;
  transition: .3s;
  overflow: hidden;
}

.btn::before {
	content: "";
	position: absolute;
	width: 100%;
	height: 100%;
	background: linear-gradient(91.5deg, #D0BCE8 2.55%, #EDC8C8 54.9%, #F7E38D 97.45%);
	top: 0;
	left: 0;
	opacity: 0;
	transition: .3s;
}

.btn span {
  display: block;
	position: relative;
	font-size: myrem(16);
	letter-spacing: 0.04em;
	transition: .3s;
  　　　color: #000;
}

.btn span::before {
	content: "→";
	position: absolute;
	top: 50%;
	right: 0;
	transform: translateY(-50%);
}

a {
  opacity: 1;
  text-decoration: none;
}

.btn:hover::before {
  opacity: 1;
}

.btn:hover span {
  color: #fff;
}

まずは、.btnの疑似要素にグラデーション背景を設定します。

.btn::before {
	content: "";
	position: absolute;
	width: 100%;
	height: 100%;
	background: linear-gradient(91.5deg, #D0BCE8 2.55%, #EDC8C8 54.9%, #F7E38D 97.45%);
	top: 0;
	left: 0;
	opacity: 0;
	transition: .3s;
}

ポイントは「opacity」を0にします。この「opacity」を変化させることで
アニメーションを実現しています。

このままだと疑似要素が親要素の.btnからはみ出してしまうので
.btnに「overflow: hidden;」を設定します。これで疑似要素がはみ出ずきれいに枠に収まります。