CSSでアニメーションするボタン【ホバーエフェクト】

2023年1月13日

今回はホバーアニメーションするボタンのアイデアを紹介します。ボタンエフェクトの参考にしてみてください。

CSSでアニメーションするボタン【ホバーエフェクト】

最初に全てのコードをお見せして、後から細かく説明しますので、コードだけ知りたい方はコピーしてすぐに使ってみてください！

HTML↓

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSSでアニメーションするボタン【ホバーエフェクト】</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <a href="#">read more</a>
</body>
</html>

CSS↓

*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: sans-serif;
    background: #262626;
}
a{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    text-decoration: none;
    color: #ffffff;
    text-transform: uppercase;
    font-size: 20px;
    font-weight: bold;
    letter-spacing: 2px;
    padding: 15px 30px;
}
a::before{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #ff8c00;
    z-index: -1;
    transition: .5s;
    transform-origin: bottom right;
    transform: scale(0);
}
a:hover::before{
    transition: .5s;
    transform-origin: top left;
    transform: scale(1);
}
a::after{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: transparent;
    border: 2px solid #ff8c00;
    box-sizing: border-box;
    z-index: -1;
    transition: 0.5s;
    transform-origin: top left;
    transform: scale(1);
}
a:hover::after{
    transition: .5s;
    transform-origin: bottom right;
    transform: scale(0);
}

CSSの解説

その1　::before,::afterを使う

a::before{
    transform: scale(0);
}
a:hover::before{
    transform: scale(1);
}

a::after{
    transform: scale(1);
}
a:hover::after{
    transform: scale(0);
}

<a>タグに擬似要素を2つ作成して、それに平常時とホバー時で動きを付けます。

::beforeをオレンジの背景にします。幅と高さをボタンいっぱいに設定し、transform:scale(0);で初めは見えない状態にしておきます。

::afterはボタンのボーダーにします。同じく大きさを一緒にし、こちらはtransform:scale(1);にして初めは表示させておきます。

その2　transform-originの設定

a::before{
    transform-origin: bottom right;
    transform: scale(0);
}
a:hover::before{
    transform-origin: top left;
    transform: scale(1);
}

a::after{
    transform-origin: top left;
    transform: scale(1);
}
a:hover::after{
    transform-origin: bottom right;
    transform: scale(0);
}

transform-originとは要素の変形の原点を設定できるプロパティです。a::before（背景のオレンジ）ではbottom rightつまり右下を基準にscale(0)で見えなくなっています。これがホバーした時、つまりscale(1)になる時、右下を基準に左上に大きくなって、scale(1)の状態になると言うことです。

これを指定しない場合は要素の真ん中を原点に変形が行われます。

その3　transitionでアニメーションをつける

transitionでscale(0)からscale(1)、もしくはその逆に変形が行われる時間を設定し、目に見えるスピードで変形させます。こうすることでアニメーションが再現されます。コツとしては、transitionプロパティは、transitionが設定された要素（クラス）がその状態になるまでの時間を設定するので、何秒後にそうなって欲しい要素（クラス）に設定します。