2022年1月22日 / 最終更新日時 : 2022年1月22日 info@rishuntrading.co.jp

CSS:hover時にふわっとグラデーションさせる方法

「グラデーション機能を使ったボタン」を制作し、マウスでホバーされた際に、「さらに別のグラデーション」を使って、ふわっと光が当たっている箇所が変わるような表現を実現したいと思ったところ、CSSのtransition(徐々に変化させる)が効かない事象に遭遇しました。
(調べたところ、このtransitionが効かないの事象は仕様のようです。)
そのため、考えた結果、別のやり方で実現できましたので、そのやり方について今回は共有させて頂こうと思います。

1.発生する事象とソースの内容
- HTML
- CSS
2.hover時にふわっとグラデーションをかける事ができたボタン
- HTML
- CSS
3.考え方

1.発生する事象とソースの内容

「グラデーション」をかけたボタンに対し、hoverされた際の疑似要素に「別のグラデーション」をかけます。
ふわっとした表現をしたいので、transition(徐々に変化させる)をかけますが、残念ながらこのtransitionが効きません。

ボタン！

HTML

<div class="blog20220122">
  <a class="blog20220122-ng" href="#">ボタン！</a>
</div>

</div>

CSS

.blog20220122{
  width:100%;
}
.blog20220122-ng{
  color:#fff;
  font-weight:700;
  border-radius:10px;
  display:table;
  margin:0 auto;
  width:200px;
  height:45px;
  display:flex;
  justify-content:center;
  align-items:center;
  background: linear-gradient(95deg, #0358f5 50%, #dbe9fa 95%);
  transition:all 0.5s;  /*** 効かない ***/
}
.blog20220122-ng:hover{
  color:#fff;
  text-decoration:none;
  background: linear-gradient(45deg, #0358f5 50%, #dbe9fa 90%);
}

.blog20220122{

width:100%;

}

.blog20220122-ng{

color:#fff;

font-weight:700;

border-radius:10px;

display:table;

margin:0 auto;

width:200px;

height:45px;

display:flex;

justify-content:center;

align-items:center;

background: linear-gradient(95deg, #0358f5 50%, #dbe9fa 95%);

transition:all 0.5s; /*** 効かない ***/

}

.blog20220122-ng:hover{

color:#fff;

text-decoration:none;

background: linear-gradient(45deg, #0358f5 50%, #dbe9fa 90%);

}

これはどうやら仕様のようなので、別のやり方で実現しました。

2.hover時にふわっとグラデーションをかける事ができたボタン

ポイントは、beforeとafterの疑似要素を使い、３枚重ね合わせたボタンを作成し、z-indexで重なりの順番を指定。さらにbeforeの疑似要素にtransitionをかけ、hover時には、beforeをopacityで透過させるやり方となります。
なお、bodyに背景が指定されている場合には、ボタンの文字が後ろに下がってしまうためspanなどで括り、z-indexで上に持ってくる必要があります。

ボタン！

HTML

<div class="blog20220122">
  <a class="blog20220122-ok" href="#">
    <span>ボタン！</span>
  </a>
</div>

</a>

</div>

CSS

.blog20220122-ok{
  color:#fff;
  font-weight:700;
  border-radius:10px;
  overflow:hidden;
  display:table;
  margin:0 auto;
  width:200px;
  height:45px;
  display:flex;
  justify-content:center;
  align-items:center;
  background:transparent;  /* 一番上は透過 */
  position:relative;
  z-index:3;               /* 一番上に来る*/
}
.blog20220122-ok>span{
  position:relative;
  z-index:3               /*  ボタンの上の文字 */
}
.blog20220122-ok:before{
  content:'';
  width:100%;
  height:100%;
  background: linear-gradient(95deg, #0358f5 50%, #dbe9fa 95%);
  position:absolute;
  top:0;
  left:0;
  z-index:2;             /* その下のボタン */
  transition:all 0.5s;   /* 徐々に変化 */
}
.blog20220122-ok:after{
  content:'';
  width:100%;
  height:100%;
  background: linear-gradient(45deg, #0358f5 50%, #dbe9fa 90%);
  position:absolute;
  top:0;
  left:0;
  z-index:1;            /* さらにその下のボタン */
}
.blog20220122-ok:hover:before{
  opacity:0;           /* hoverされたら透過 */
}

.blog20220122-ok{

color:#fff;

font-weight:700;

border-radius:10px;

overflow:hidden;

display:table;

margin:0 auto;

width:200px;

height:45px;

display:flex;

justify-content:center;

align-items:center;

background:transparent; /* 一番上は透過 */

position:relative;

z-index:3; /* 一番上に来る*/

}

.blog20220122-ok>span{

position:relative;

z-index:3 /* ボタンの上の文字 */

}

.blog20220122-ok:before{

content:'';

width:100%;

height:100%;

background: linear-gradient(95deg, #0358f5 50%, #dbe9fa 95%);

position:absolute;

top:0;

left:0;

z-index:2; /* その下のボタン */

transition:all 0.5s; /* 徐々に変化 */

}

.blog20220122-ok:after{

content:'';

width:100%;

height:100%;

background: linear-gradient(45deg, #0358f5 50%, #dbe9fa 90%);

position:absolute;

top:0;

left:0;

z-index:1; /* さらにその下のボタン */

}

.blog20220122-ok:hover:before{

opacity:0; /* hoverされたら透過 */

}

3.考え方

考え方は、こんなイメージです。

「ボタン本体」は透過させていますので、beforeが表示されています。
さらに、hoverされた際には、beforeに対しopacity:0を指定しているため、beforeが透過され、afterが表示されます。
また、このbeforeには、transitionが指定されていますので、ふわっとグラデーションをかけたように表現する事ができます。
困ってこのページにたどり着いた人は、試してみてください。