【CSS】line-gradientを使っているときのhover時transitionがうまく動かない！？

おはようございます、じゃそです！

最近HTML、CSSを勉強していて、自分の詰まったところがあったので、自分の備忘録というのも含めて、初心者フロントエンジニアの方の助けになれば幸いです！

普通にhover・transitionをつけても動かない？
このように実装すればhover・transitionが動きます！
プログラミングを独学でやるよりスピードアップ！Freeks
1. 関連

普通にhover・transitionをつけても動かない？

まずは、下記のコードを見てください。

See the Pen Untitled by 岡本有馬 (@hwnihrtx-the-builder) on CodePen.

なんとなく動きそうだけど、これだと動かないんです。これは、backgroundに対応していないからこのような動きになってしまうそうです。

細かい部分で詰まっちゃいますよね。。。

そこで私が調べた方法を共有しますので、ぜひ参考にしてみてください！

このように実装すればhover・transitionが動きます！

See the Pen Untitled by 岡本有馬 (@hwnihrtx-the-builder) on CodePen.

ざっと説明すると、リンクボタンを最初に作って、::after擬似要素でリンクボタンの後ろにホバーした時に表示したいボタンを置いて、opacity（要素の不透明度）を操作して、transitionしているように見せています。

私の理解のためにも、それぞれのコードの意味を下記にまとめておきますので、しっかり理解した上で、使用していきましょう！

.link {
  /*リンクボタンのデザイン*/
  background: linear-gradient(90deg,#26D6A9, #1498C2); /*リンクボタンの背景色*/
  border-radius: 30px;　/*リンクボタンに丸みを持たせる*/
  padding: 0.5rem 4.5rem; /*リンクボタンに幅を持たせる*/
  position: relative;　/*リンクボタンの後ろにtransition後のボタンを置くために使用*/
  z-index: 0; /*元のリンクボタンが上に表示されるように指定*/
  
   /*transition後のリンクボタン設定*/
  &::after {
    background-color: #26D6A9; /*transion後の背景色*/
    border-radius: 30px; /*transion後の丸み*/
    content: ''; /*文字などは変える必要がないため指定*/
    height: 100%; /*元のリンクボタンと同じ高さになるように指定*/
    left: 0; /*afterは元のボタンの少し右側に来るため、重なるように指定*/
    opacity: 0; /*最初は透明にしておく*/
    position: absolute; /*transition後のボタンの位置を元のリンクボタンに重ねるために使用*/
    top: 0; /*afterは元のボタンの少し下側に来るため、重なるように指定*/
    transition: opacity 0.7s; /*透明度を0.7秒で変化させます*/
    width: 100%; /*元のリンクボタンと同じ幅になるように指定*/
    z-index: -1; /*transion後のリンクボタンが元のリンクボタンより後ろにするために使用*/
  }

  /*hoverしたら、transition後のボタンの透明度をMAXにして表示する*/
  &:hover {
    &::after {
      opacity: 1;
    }
  }
}