マウスホバーで色が変化するグラデーションボタン
マウスホバーのアニメーションにはいろいろありますが、本記事ではグラデーション変化させる方法をご紹介します。
実装目標の確認
初期状態では左側が明るいグラデーションで、マウスホバーした時には右側が明るいグラデーションに変化するようにします。
HTML & CSS コード例
<a href="" class="button">ボタン</a>
/* ボタン親要素 */
.button {
display: block;
width: 200px;
height: 60px;
line-height: 60px;
color: #fff;
text-align: center;
text-decoration: none;
border-radius: 30px;
position: relative;
z-index: 0;
}
/* 2つの疑似要素をボタンに重ねて配置 */
.button::before, .button::after {
content: "";
width: 100%;
height: 100%;
border-radius: 30px;
position: absolute;
top: 0;
left: 0;
}
/* 初期状態で前面に出す疑似要素 */
.button::before {
z-index: -1;
transition: .5s;
background: linear-gradient(to right, #00ccff,#0066ff);
}
/* ホバー時に見せる疑似要素 */
.button::after {
z-index: -2;
background: linear-gradient(to right, #0066ff,#00ccff);
}
/* ホバー時は前面のシートを透明にする */
.button:hover::before{
opacity: 0;
}
コード解説
<a></a>
に2つの疑似要素before
とafter
を重ねて配置し、それぞれグラデーションを指定します。
初期状態ではbefore
が前面にあるためafter
が隠れて見えない状態です。
マウスホバーでbefore
のopacity
を0にすることで、after
が見えるようになり、目標のアニメーションが実現します。
ちなみに以下のCSSだとtransition
が効かず、グラデーションがパッと切り替わってしまいます。
.button {
transition: .3s;
background: linear-gradient(to right, #00ccff,#0066ff);
}
.button:hover {
background: linear-gradient(to right, #0066ff,#00ccff);
}
まとめ
いかがでしたか?
ホバーのアニメーションなんて楽勝楽勝!と思っていたら、ちょっと躓いてしまいました。
疑似要素の便利さを改めて感じました。
ぜひ、いろんな場面で活用してみてください。
最後までご覧いただきありがとうございました。