【CSS】ホバーでボタンの背景にグラデーションをかける方法

CSSでbackgroundにグラデーションをかけるには、ちょっとした仕掛けが必要です。

こちらを参考にしたのですが、グラデーションがかかった状態から別色のグラデーションへの変化しか解説がなかったので、無色からグラデーションへの変化をメモとして残しておきます。

参考
https://www.tsukimi.net/css_gradient_hover_animation.html

<a href="" class="hvr-bg-gradient">button</a>

ボタンはいい感じにつくってください。
z-index、display: block、position: relativeが設定されていればOKです。

.hvr-bg-gradient{
  z-index:0;
  display: block;
  position: relative;
}
.hvr-bg-gradient:before{
  content: "";
  width: 100%;
  height: 100%;
  background:rgba(0,0,0,0)!important;
  z-index: -1;
  position: absolute;
  left: 0;
  top: 0;
  border-radius: 1.25rem!important;
}
.hvr-bg-gradient:after{
  content: "";
  width: 101%;
  height: 100%;
  background: linear-gradient( to right,  rgba(16, 129, 246,0.4) 0%, rgba(254, 189, 231, 0.4))!important;
  z-index: -2;
  position: absolute;
  left: 0;
  top: 0;
  border-radius: 1.25rem!important;
  opacity: 0;
  transition: 0.5s;
}
.hvr-bg-gradient:hover:before{
  opacity: 0;
}
.hvr-bg-gradient:hover:after{
  opacity: 1;
}

基本的には参考サイトと同じようにz-indexで層を作ってhoverでopacityを変化させます。
違うのはbeforeの色をrgbaで透過させておくことと、after要素のopacityを変化させることです。

1から作ると何気に時間がかかりましたが、仕組みを理解すると簡単ですね。