Web制作
グラデーションを使ったホバーアニメーションを設定する

グラデーションを使ったホバーアニメーションを設定する

2023.06.09

ボタンタグにホバーしたときに、アニメーションを使って色を変化させるサンプルを作ってみました。

サンプルページを見てもらうとわかると思いますが、ボタンタグにホバーすると、アニメーションで色が変化します。そして、その色が、左上を起点にしたグラデーションになっています。

グラデーションを使ったホバーアニメーションサンプル→

グラデーションもアニメーションも、単独で使う分には難しくないのですが、同時に行うとなると少し工夫が必要になるので、もしよければ、参考にしてください。

プロパティの確認

使用するプロパティに関して、グラデーションの配色にする際には、「background-color」ではなく「background-image」を使います。ですが、この「background-image」では、アニメーションで色を変化させることができません。また、現在のCSSグラデーションは、色が変化する起点を自由に決めることができません（ですよね？）。

そこで、今回のサンプルでは、グラデーションを設定した擬似要素を任意の位置に配置し、opacityを使ってアニメーションを設定させています。

ボタンタグの設定

まず、基本となるボタンタグの設定です。ここでは、特に難しい設定は行っていません。

<div class="box">
    <button class="button">button sample</button>
</div>

.box{
    width: 400px;
    height: 400px;
    margin: 30px auto;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #CCC;
}
.button{
    width: 160px;
    padding: 16px;
    background-color: hsl(173, 80%, 80%);
    box-shadow: 0 0 10px #b6b6b6;
    border: none;
    border-radius: 9999px;
    cursor: pointer;
}

擬似要素を使ってグラデーションの表現

次に、擬似要素を使って、ホバーしたときのグラデーションを作成します。

まず、beforeを使って、大きめの円を作成します。グラデーションを使うときは、大きめのグラデーションで設定した方が、よく馴染むと思います。

.box{
    width: 400px;
    height: 400px;
    margin: 30px auto;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #CCC;
}
.button{
    width: 160px;
    padding: 16px;
    background-color: hsl(173, 80%, 80%);
    box-shadow: 0 0 10px #b6b6b6;
    border: none;
    border-radius: 9999px;
    cursor: pointer;
    position: relative;
}
.button::before{
    position: absolute;
    background: radial-gradient(circle, hsl(0, 0%, 100%) 0%,
 hsl(173, 80%, 80%) 80%, hsl(173, 80%, 80%) 100%);
    width: 120px;
    height: 120px;
    border-radius: 9999px;
    top: -60px;
    left: -30px;
    content: "";
}

そして、ボタンタグを親として、擬似要素をpositionを使って移動させます。今回は、左上付近に移動させていますが、もちろん、他の自由な場所に設定することができます。場所を固定できたら、ボタンタグに「overflow:hidden」を設定し、はみ出した部分を非表示にます。

.box{
    width: 400px;
    height: 400px;
    margin: 30px auto;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #CCC;
}
.button{
    width: 160px;
    padding: 16px;
    background-color: hsl(173, 80%, 80%);
    box-shadow: 0 0 10px #b6b6b6;
    border: none;
    border-radius: 9999px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}
.button::before{
    position: absolute;
    background: radial-gradient(circle, hsl(0, 0%, 100%) 0%,
 hsl(173, 80%, 80%) 80%, hsl(173, 80%, 80%) 100%);
    width: 120px;
    height: 120px;
    border-radius: 9999px;
    top: -60px;
    left: -30px;
    content: "";
}
.button span{
    position: relative;
}

opacityを使ってアニメーション

最後に、ホバーしたときにアニメーションを設定します。

先ほどふれたように、background-imageでは、アニメーションの設定ができません。そこで、今回は、擬似要素に対してopacityを使ったアニメーションを設定します。

※このopacityを使ったやり方については、こちらのサイトを参考にさせてもらいました。

【CSS】backgroundのlinear-gradientでtransitionが効かない時の対処法 – じゅんぺいブログ

.box{
    width: 400px;
    height: 400px;
    margin: 30px auto;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #CCC;
}
.button{
    width: 160px;
    padding: 16px;
    background-color: hsl(173, 80%, 80%);
    box-shadow: 0 0 10px #b6b6b6;
    border: none;
    border-radius: 9999px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: all .8s;
}
.button:hover{
    box-shadow: 0 0 12px #b6b6b6,  0 0 12px #b6b6b6,  0 0 12px #b6b6b6;
}
.button::before{
    position: absolute;
    background: radial-gradient(circle, hsl(0, 0%, 100%) 0%, 
hsl(173, 80%, 80%) 80%, hsl(173, 80%, 80%) 100%);
    width: 120px;
    height: 120px;
    border-radius: 9999px;
    top: -60px;
    left: -30px;
    content: "";
    opacity: 0;
    transition: all .8s;
}
.button:hover::before{
    opacity: 1;
}
.button span{
    position: relative;
}

とはいっても、設定は簡単で、初期状態を「opacity:0」にしておいて、ホバーしたときに「opacity:1」にするだけです。