【CSSのみ】ボタンのホバーアニメーションまとめ

2021.08.21

2022.07.09

どうも！かけちまるです！

サイトをコーディングするときリンクボタンを設置することが多いと思います。
そのボタンを設置するときサイト閲覧者にボタンが押せることがわかりやすいためにホバーアニメーションはほぼ必須だと思います。

サイトのコーディングをする時のボタンのホバーアニメーションですが、過去に実装した動きを使い回してばかりで表現の幅が狭いままになっていませんか？
そんな人のために実際のコーディングで使えそうなホバーアニメーションとちょっとトリッキーなホバーアニメーションをいくつか紹介していきます。

全てCSSで実装できるのでそこまで面倒な実装ではないと思いますので試してみてください。

透過する

おそらく一番手軽な方法だと思います。
HTMLもCSSもシンプルに実装できます。

ホバーするとボタンが透過するアニメーション

実装サンプル

透過するボタン

HTML

HTML
コピー
<a class="link_btn" href="">透過するボタン</a>

CSS

CSS
コピー
.link_btn{
    border-radius: 25px;
    border: 1px solid #000;
    color: #000;
    font-size: 16px;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 300px;
    height: 50px;

    opacity: 1;
    transition: all 0.3s ease-out;
}
.link_btn:hover{
    opacity: 0.7;
}

背景色と文字色を変化させる

割と手軽でシンプルに実装できます。
HTMLもCSSもシンプルに実装できます。

ホバーすると背景色と文字色が変化します。

実装サンプル

背景色と文字色を変化

HTML

HTML
コピー
<a class="link_btn" href="">背景色と文字色を変化</a>

CSS

CSS
コピー
.link_btn{
    border-radius: 25px;
    border: 1px solid #000;
    color: #000;
    font-size: 16px;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 300px;
    height: 50px;

    transition: all 0.3s ease-out;
}
.link_btn:hover{
    background-color: #000;
    border: 1px solid #000;
    color: #fff;
}

矢印の出現

CSSが少し複雑になります。
HTMLはシンプルに実装できます。

ホバーすると矢印が出現しボタンのwidthが少し伸びます。

実装サンプル

矢印の出現

HTML

HTML
コピー
<a class="link_btn" href="">矢印の出現</a>

CSS

CSS
コピー
.link_btn{
    border-radius: 30px;
    border: 1px solid #000;
    color: #000;
    display: inline-block;
    font-size: 16px;
    font-weight: bold;
    padding: 15px 60px;
}
.link_btn::before{
    content: "";
    margin-left: 16px;
}
.link_btn::after{
    content: "〉";
    margin-left: 0px;
    opacity: 0;
    transition: all 0.3s ease;
}
.link_btn:hover::after{
    margin-left: 20px;
    opacity: 1;
}

上下に文字が切り替わる

ホバーすると上下に文字が切り替わります。

実装サンプル

上下にテキスト

ポイント

・擬似要素のcontent: attr(data-content);でdata-content属性の文字を取得している。

HTML

HTML
コピー
<a class="link_btn" href="">
    <div class="link_text_wrap">
        <div class="link_text" data-content="上下にテキスト">上下にテキスト</div>
    </div>
</a>

CSS

CSS
コピー
.link_btn{
    box-sizing: border-box;
    border-radius: 25px;
    border: 1px solid #000;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 300px;
    height: 50px;
    transition: all 0.2s linear;
}

.link_text_wrap{
    overflow: hidden;
}

.link_text{
    color: #000;
    font-size: 16px;
    font-weight: bold;
    transform: translateY(0%);
    transition: all 0.6s cubic-bezier(.215,.61,.355,1);
}
.link_text::after{
    content: attr(data-content);
    position: absolute;
    top: 100%;
    left: 0%;
}
.link_btn:hover .link_text{
    transform: translateY(-100%);
}

流れる文字（電光掲示板）

ホバーしてる間はずっと文字が流れるアニメーションです。

実装サンプル

流れる文字

ポイント

・擬似要素のcontent: attr(data-content);でdata-content属性の文字を取得している。
・@keyframesを使用している。

HTML

HTML
コピー
<a class="link_btn" href="">
    <span class="link_text" data-content="流れる文字">流れる文字</span>
</a>

CSS

CSS
コピー
.link_btn{
    border-radius: 25px;
    border: 1px solid #000;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    width: 300px;
    height: 50px;
}

.link_text{
    color: #000;
    font-size: 16px;
    font-weight: bold;
    position: relative;
}
.link_text::before{
    content: attr(data-content);
    position: absolute;
    top: 0%;
    left: 0%;
    transform: translateX(-200%);
}
.link_btn:hover .link_text{
    animation-name: text-flow;
    animation-duration: 2.0s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

@keyframes text-flow{
    0%{
        transform: translateX(0%);
    }
    100%{
        transform: translateX(200%);
    }
}

グリッチアニメーションその１

使い所は少なそうで凝ったデザインです。
HTMLはシンプルですが、CSSが複雑になります。

ホバーすると心霊現象のようなグリッチアニメーションが始まります。

実装サンプル

グリッチアニメーション01

ポイント

・@keyframesを使用している。

HTML
コピー

HTML

HTML
コピー
<a class="link_btn” href="">グリッチアニメーション01</a></div>

CSS

CSS
コピー
.link_btn{
    border-radius: 25px;
    border: 1px solid #000;
    color: #000;
    font-size: 16px;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    width: 300px;
    height: 50px;
    position: relative;

    transition: all 0.3s ease-out;
}
.link_btn:hover{
    animation-name: glitch_skew;
    animation-duration: 0.7s;
    animation-iteration-count: infinite;
}
.link_btn::after{
    content: "";
    box-shadow: rgba(0, 0, 0, 0.5) 0 0 15px 2px;
    background: rgba(255,255,0,0.5);
    width: 100%;
    height: 1px;
    opacity: 0;
    position: absolute;
    left: 50%;
    top: 0;
    transform: translateX(-50%);
}
.link_btn:hover::after{
    animation-name: glitch_scan;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    opacity: 1;
}

@keyframes glitch_skew{
    0%{
        transform: skewX(0deg);
    }
    5%{
        transform: skewX(4deg);
        opacity: 0.5;
    }
    10%{
        transform: skewX(0deg);
        opacity: 1;
    }
    15%{
        transform: skewX(-7deg);
        opacity: 0.5;
    }
    20%{
        transform: skewX(0deg);
        opacity: 1;
    }
    45%{
        transform: skewX(5deg);
        opacity: 0.5;
    }
    50%{
        transform: skewX(0deg);
        opacity: 1;
    }
    55%{
        transform: skewX(0deg);
        opacity: 0.5;
    }
    60%{
        transform: skewX(0deg);
        opacity: 1;
    }
    75%{
        transform: skewX(4deg);
    }
    80%{
        transform: skewX(0deg);
    }
    85%{
        transform: skewX(-10deg);
        opacity: 0.5;
    }
    90%{
        transform: skewX(0deg);
        opacity: 1;
    }
    100%{
        transform: skewX(0deg);
    }
}

@keyframes glitch_scan{
    0% {
        top: 0%;
    }
    50% {
        top: 100%;
    }
    100% {
        top: 0%;
    }
}

グリッチアニメーションその２

使い所は少なそうで凝ったデザインです。
HTMLもCSSも複雑になります。

ホバーすると色の三原色を活用した映像チックなグリッチアニメーションが始まります。

実装サンプル

グリッチパターン02

POINT

・@keyframesを使用している。

HTML

HTML
コピー
<a class="link_btn” href="">
    <div class=“link_text_red">グリッチパターン02</div>
    <div class="link_text_blue">グリッチパターン02</div>
    <div class="link_text_green">グリッチパターン02</div>
    <div class="link_text_main">グリッチパターン02</div>
</a>

CSS

CSS
コピー
.link_btn{
    border-radius: 25px;
    border: 1px solid #000;
    color: #000;
    display: block;
    font-size: 16px;
    font-weight: bold;
    overflow: hidden;
    width: 300px;
    height: 50px;
    position: relative;
}
.link_btn:hover{
    animation-name: glitch-skew;
    animation-duration: 4.0s;
    animation-delay: 1.0s;
    animation-timing-function: cubic-bezier(.25, .46, .45, .94);
    animation-iteration-count: infinite;
}

@keyframes glitch-skew{
    0% {
        transform: skew(0deg, 0deg);
    }
    28% {
        transform: skew(0deg, 0deg);
        filter: blur(0);
    }
    30% {
        transform: skew(-20deg, 0deg);
        filter: blur(4px);
    }
    32% {
        transform: skew(20deg, 0deg);
    }
    34% {
        transform: skew(0deg, 0deg);
        filter: blur(0);
    }
    58% {
        transform: skew(0deg, 0deg);
        filter: blur(0);
    }
    60% {
        transform: skew(-20deg, 0deg);
        filter: blur(4px);
    }
    62% {
        transform: skew(20deg, 0deg);
    }
    64% {
        transform: skew(0deg, 0deg);
        filter: blur(0);
    }
    66% {
        transform: skew(-20deg, 0deg);
        filter: blur(4px);
    }
    68% {
        transform: skew(20deg, 0deg);
    }
    70% {
        transform: skew(0deg, 0deg);
        filter: blur(0);
    }
    100% {
        transform: skew(0deg, 0deg);
    }
}

.link_text_red,
.link_text_blue,
.link_text_green{
    opacity: 0.6;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}

.link_text_red{
    color: red;
}
.link_btn:hover .link_text_red{
    animation-name: glitch;
    animation-duration: 0.3s;
    animation-timing-function: cubic-bezier(.25, .46, .45, .94);
    animation-iteration-count: infinite;
}

.link_text_blue{
    color: blue;
}
.link_btn:hover .link_text_blue{
    animation-name: glitch;
    animation-duration: 0.3s;
    animation-timing-function: cubic-bezier(.25, .46, .45, .94);
    animation-iteration-count: infinite;
    animation-direction: reverse;
}

.link_text_green{
    color: #00FF0B;
}
.link_btn:hover .link_text_green{
    animation-name: glitch;
    animation-duration: 0.3s;
    animation-delay: 0.1s;
    animation-timing-function: cubic-bezier(.25, .46, .45, .94);
    animation-iteration-count: infinite;
}

@keyframes glitch{
    0% {
        transform: translate(-50%,-50%);
    }
    20% {
        transform: translate(-52%,-48%);
    }
    40% {
        transform: translate(-52%,-52%);
    }
    60% {
        transform: translate(-48%,-48%);
    }
    80% {
        transform: translate(-48%,-52%);
    }
    100% {
        transform: translate(-50%,-50%);
    }

}

.link_text_main{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}

斜め線の出現

ホバーすると背景が透明になり、斜めの枠線が2つ出現します。

割と汎用性はありそうなデザインです。

実装サンプル

斜めの枠線

POINT

・擬似要素の::beforeと::afterを使用

HTML

HTML
コピー
<a class="link_btn" href="">斜めの枠線</a>

CSS

CSS
コピー
.link_btn{
    background-color: #000;
    color: #fff;
    font-size: 16px;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 300px;
    height: 50px;
    position: relative;

    transition: all 0.3s ease-out;
}
.link_btn::before,
.link_btn::after{
    content: "";
    box-sizing: border-box;
    border: 1px solid transparent;
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;

    transition: all 0.3s ease-out;
}
.link_btn:hover{
    background-color: transparent;
    color: #000;
}
.link_btn:hover::before,
.link_btn:hover::after{
    border-color: #000;
}
.link_btn:hover::before{
    transform: translate(-5px, -5px) skewX(7deg)
}
.link_btn:hover::after{
    transform: translate(5px, 5px) skewX(7deg)
}

おわり

フィードバックを送信

記事についてのフィードバックはTwitterかお問い合わせフォームから受け付けております。

かけちまる

Webエンジニアをしています。
HTML/CSS/JavaScript/jQuery/PHPができます。
WEB制作を中心に日々学びになったこと、興味が沸いたことについて初心者の方でもわかりやすいようにアウトプットしていくブログです。

かけちまるblog

【CSSのみ】ボタンのホバーアニメーションまとめ

透過する

HTML

CSS

背景色と文字色を変化させる

HTML

CSS

矢印の出現

HTML

CSS

上下に文字が切り替わる

HTML

CSS

流れる文字（電光掲示板）

HTML

CSS

グリッチアニメーションその１

HTML

CSS

グリッチアニメーションその２

HTML

CSS

斜め線の出現

HTML

CSS

関連記事

【Contact Form 7】ログインユーザーのためにselectのデフォルト値を設定する

mix-blend-modeが効かない時はスタックコンテキストを考えよう

【modal-video.js使い方】YouTube、Vimeoをポップアップ再生する方法

WordPressでショートコードを自作する方法

CSSでサイトのスクロールを無効にする方法

floatで失った要素の高さを取り戻す2つの方法

【CSSのみ】ボタンのホバーアニメーションまとめ

透過する

HTML

CSS

背景色と文字色を変化させる

HTML

CSS

矢印の出現

HTML

CSS

上下に文字が切り替わる

HTML

CSS

流れる文字（電光掲示板）

HTML

CSS

グリッチアニメーション その１

HTML

CSS

グリッチアニメーション その２

HTML

CSS

斜め線の出現

HTML

CSS

関連記事

【Contact Form 7】ログインユーザーのためにselectのデフォルト値を設定する

mix-blend-modeが効かない時はスタックコンテキストを考えよう

【modal-video.js使い方】YouTube、Vimeoをポップアップ再生する方法

WordPressでショートコードを自作する方法

CSSでサイトのスクロールを無効にする方法

floatで失った要素の高さを取り戻す2つの方法

グリッチアニメーションその１

グリッチアニメーションその２