CSSでbackgroundにグラデーションをかけるには、ちょっとした仕掛けが必要です。
こちらを参考にしたのですが、グラデーションがかかった状態から別色のグラデーションへの変化しか解説がなかったので、無色からグラデーションへの変化をメモとして残しておきます。
参考
https://www.tsukimi.net/css_gradient_hover_animation.html
<a href="" class="hvr-bg-gradient">button</a>
ボタンはいい感じにつくってください。
z-index、display: block、position: relativeが設定されていればOKです。
.hvr-bg-gradient{
z-index:0;
display: block;
position: relative;
}
.hvr-bg-gradient:before{
content: "";
width: 100%;
height: 100%;
background:rgba(0,0,0,0)!important;
z-index: -1;
position: absolute;
left: 0;
top: 0;
border-radius: 1.25rem!important;
}
.hvr-bg-gradient:after{
content: "";
width: 101%;
height: 100%;
background: linear-gradient( to right, rgba(16, 129, 246,0.4) 0%, rgba(254, 189, 231, 0.4))!important;
z-index: -2;
position: absolute;
left: 0;
top: 0;
border-radius: 1.25rem!important;
opacity: 0;
transition: 0.5s;
}
.hvr-bg-gradient:hover:before{
opacity: 0;
}
.hvr-bg-gradient:hover:after{
opacity: 1;
}
基本的には参考サイトと同じようにz-indexで層を作ってhoverでopacityを変化させます。
違うのはbeforeの色をrgbaで透過させておくことと、after要素のopacityを変化させることです。
1から作ると何気に時間がかかりましたが、仕組みを理解すると簡単ですね。
↧