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

  • LINEで送る

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

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

DEMOページ

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

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が設定された要素(クラス)がその状態になるまでの時間を設定するので、何秒後にそうなって欲しい要素(クラス)に設定します。

 

まとめ

ボタンひとつにしてもいろいろなデザインがありますが、ホバー時の動きも大事になってくると思います。比較的見やすいホバーエフェクトが好まれますが、今回は少し派手な物をチョイスしてみました。皆さんの参考になれば幸いです。

 

 

 

 

  • LINEで送る

SNSでもご購読できます。

コメントを残す

*