【HTML】グラデーションのホバー【CSS】

どうも、くまだです。

たまにやるグラデーション系のもので「元がグラデーション→ホバーで別なグラデーション」の方法について。やり方はいろいろありますが、今回は疑似要素を使ったパターン。

グラデーションホバーで別なグラデーションへ

コードはこんな感じ。

〇 HTML

  <a href="" class="link">
    <p class="text">テキスト</p>
  </a>

〇 CSS

.link {
  padding: 12px 10px 12px;
  display: block;
  position: relative;
  z-index: 0;
  text-decoration: none;
}

.link::before {
  background: linear-gradient(92.61deg, #A42877 0%, #5F319C 100%);
  display: block;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  content: "";
  position: absolute;
  z-index: -1;
  transition: all .4s;
}

.text {
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  line-height: 1.7;
}

.link::after {
  background: linear-gradient(92.61deg, #B211CB 0%, #F10083 100%);
  display: block;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  content: "";
  position: absolute;
  z-index: -2;
} 


.link:hover::before {
  opacity: 0;
}

グラデーションの要素をホバーして、ふわっと別なグラデーションにする感じ。

グラデーションは疑似要素で作成しています。

ホバーしたら、beforeでつくった疑似要素のグラデーションを

.link:hover::before {
  opacity: 0;
}

の部分で透明にして、afterでつくった疑似要素のグラデーションを表示させています。

ちなみに、afterで別なグラデーションをつくらずに、hoverでbeforeのグラデーションを切り替えようとすると、ふわっといきません。（下記の場合はうまくいかない）

.link::before {
  background: linear-gradient(92.61deg, #A42877 0%, #5F319C 100%);
  display: block;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  content: "";
  position: absolute;
  z-index: -1;
  transition: all .4s;
}



.link:hover:before {
  background: linear-gradient(92.61deg, #B211CB 0%, #F10083 100%);
}

ホバーしてもパッと切り替わってしまい、ふわっと感がない。backgroundのlinear-gradientにtransitionが効いてないからです。

なので最初にやったとおり、afterで別なグラデーション作成してbeforeでつくった疑似要素の後ろに配置。（beforeではz-index: -1;で、afterではz-index:-2;）そしてホバーでbeforeを透明にして、afterを表示させている、という仕組み。

ここまで読んでくださりありがとうございました。