グラデーションの背景をホバー時にアニメーションで変化させる！

問題の概要

・ボタンの実装でクライアントより、グラデーションの背景色をマウスホバー時にアニメーションでジワーッと変化させたいという要望がありました。
・単純にホバー時にbackgroundでグラデーションを変えてtransitionを入れただけではNGです。
背景画像は基本アニメーションできないからです。

■html 

<div class="p-header__contact"> 
<a href="mailto:support@xxx.xxx" class="btn-contact">
<span class="btn-contact__text ">お問い合わせをする</span>
<div class="btn-arrow-icon btn-arrow-icon--cta">
<img src="./img/icon/arrow.png" alt="矢印アイコン" width="24" height="49"></div>
</a>
</div>

■scss(NG例）

.p-header__contact { 
background:linear-gradient(88deg, #ED7600 4.32%, #F5AA01 96.92%); 
color:#FFF; 
border-radius: 48px; 
transition: background 0.5s ease; 

  &:hover { background: (linear-gradient(90deg,#D45100 0%,#FFD83E 100%)); 
 } 
}

対策

疑似要素を利用して、ホバー時のグラデーションの背景色を被せて、opacity：0;からopacity：1;にトランジションさせることによってジワーッと変化させることができます。

■scssコード修正例

.p-header__contact {
  position: relative;
  overflow: hidden;
  border-radius: 48px;
  color: #fff;

  /* ベースの背景 */
  background-image: linear-gradient(88deg, #ED7600 4.32%, #F5AA01 96.92%);

  /* 上に“濃いめ”のグラデをかぶせてフェード */
  &::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background-image: linear-gradient(90deg, #D45100 0%, #FFD83E 100%);
    opacity: 0;                      /* 初期は非表示 */
    transition: opacity 0.5s ease;   /* ここが効く */
    pointer-events: none;
  }

  &:hover::before {
    opacity: 1;                      /* ジワッと切替 */
  }


  /* アンカーをボタン全面クリックに */
  .btn-contact {
    z-index: 1;
    padding: 14px 28px;
  }

}