[CSS] マウスオーバー時にアニメーションするボタンを設置したい

公開日:2018/09/21 更新日:2019/07/31

やりたいこと

ボタンをマウスオーバーしたときのちょっと凝った表現として、アニメーションを活用したものがあります
オン、オフがパッと切り替わる表現と違って、マウスオーバーしている間ずっと動的にユーザーの目を惹きつけてくれます
あまり誇張して使うとうるさくなってしまうので、ワンポイントのアクセントとしてトゥギャザーするのがいいと思います

サンプルコード

.btn_anime {
    display: table;
    position: relative;
    padding: 1em 5em;
    border: 1px solid #3388dd;
    background-color: #3388dd;
    color: #fff;
}
.btn_anime::after {
    position: relative;
    top: 0px;
    right: -0.5em;
    font-family: FontAwesome;
    content: "f105";
}
.btn_anime:link,
.btn_anime:visited,
.btn_anime:active,
.btn_anime:hover {
    color: #fff;
    text-decoration: none;
}
.btn_anime:hover::after {
    animation: arrow_right 1.0s infinite;
}
@keyframes arrow_right {
    50% {
        right: -1em;
        opacity: 1;
    }
    100% {
        right: -1.5em;
        opacity: 0;
    }
}

仕組み、解説、補足など

「keyframes」という命令で「arrow_right」というアニメーションを定義しています
この「arrow_right」をhover時のスタイルとして指定することで、アニメーションが再生されます

ご質問など受け付けています

記事の中でわかりにくかったところ、もっと知りたかったこと、間違っていることなど、何でもお気軽にご連絡ください。

ご連絡は下記フォームを利用いただくか、ツイッターアカウント@flat8migi宛てでもOKです。