フリーランス|WEB 制作経験丸7年、制作会社様からのご依頼に丁寧・高クオリティでお手伝いいたします。 IRODORI DESIGN

B L O G

【コピペOK】ボタンにホバーした時のCSSアニメーション15選

css
アニメーション
コピペ
ボタン
ホバー

こんにちは、岐阜・名古屋を拠点に全国各地からご依頼いただくWEBサイトを制作しているフリーランスエンジニアの寺井です。

ボタンにホバーした時のアニメーションがいつも同じになっているコーダーも多いのではないでしょうか。
デザイナーからホバーした時のアニメーションの指定やデザインがあれば、その通りに作ればいいですが、お任せの場合、大抵はいくつかのパターンを使いまわしてしまいます。

そんな時のためにコピペですぐに使えるボタンにホバーした時のCSSアニメーションを15種類まとめてみました。

どんなWebサイトでも違和感無く使うことが出来るシンプルなアニメーションを集めてみました。

HTMLは以下のタグ構造を想定しています。

<a href="#" class="button">もっと見る</a>

半透明にする

ホバーした時にボタンを半透明にするアニメーションはこちら。

.button{
    width: 250px;
    height: 50px;
    background: #dc5a45;
    text-decoration: none;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .3s ease-in-out;
}
.button:hover{
    opacity: .6;
}

実装サンプルはこちら。

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

色を反転させる

ホバーした時にボタンの色を反転させるアニメーションはこちら。

.button{
    width: 250px;
    height: 50px;
    background: #dc5a45;
    border: 1px solid #dc5a45;
    text-decoration: none;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .3s ease-in-out;
}
.button:hover{
    background: #fff;
    color: #dc5a45;
}

実装サンプルはこちら。

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

色を変化させる

ホバーした時に色を変化させるアニメーションはこちら。

.button{
    width: 250px;
    height: 50px;
    background: #dc5a45;
    text-decoration: none;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .3s ease-in-out;
}
.button:hover{
    background: #3d8582;
}

実装サンプルはこちら。

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

角丸にする

ホバーした時にボタンを角丸にするアニメーションはこちら。

.button{
    width: 250px;
    height: 50px;
    background: #dc5a45;
    text-decoration: none;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .3s ease-in-out;
}
.button:hover{
    border-radius: 25px;
}

実装サンプルはこちら。

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

シャドーをかける

.button{
    width: 250px;
    height: 50px;
    background: #dc5a45;
    text-decoration: none;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .3s ease-in-out;
}
.button:hover{
    box-shadow: 0 5px 15px rgba(0,0,0,.15);
}

実装サンプルはこちら。

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

テキストの間隔を広げる

ホバーした時にテキストの間隔を広げるアニメーションはこちら。

.button{
    width: 250px;
    height: 50px;
    background: #dc5a45;
    text-decoration: none;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .3s ease-in-out;
}
.button:hover{
    letter-spacing: .25em;
}

実装サンプルはこちら。

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

中央から広がる下線を引く

ホバーした時に中央から広がる下線を引くアニメーションはこちら。

<a href="#" class="button">もっと見る</a>
.button{
    width: 250px;
    height: 50px;
    background: #dc5a45;
    text-decoration: none;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}
.button::before{
    content: "";
    display: block;
    width: 0%;
    height: 5px;
    position: absolute;
    left: 50%;
    bottom: 0;
    background: #b53d2a;
    transition: all .3s ease-in-out;
}
.button:hover::before{
    width: 100%;
    left: 0%;
}

実装サンプルはこちら。

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

左から右へ移動する線を引く

ホバーした時に左から右へ移動する線を引くアニメーションはこちら。

<a href="#" class="button">もっと見る</a>
.button{
    width: 250px;
    height: 50px;
    background: #dc5a45;
    text-decoration: none;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}
.button::before{
    content: "";
    display: block;
    width: 0%;
    height: 5px;
    position: absolute;
    right: 0;
    bottom: 0;
    background: #b53d2a;
    transition: all .3s ease-in-out;
}
.button:hover::before{
    width: 100%;
    left: 0;
    right: unset;
}

実装サンプルはこちら。

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

左から右へ移動する背景色を表現する

ホバーした時に左から右へ移動する背景色を表現するアニメーションはこちら。

.button{
    width: 250px;
    height: 50px;
    text-decoration: none;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}
.button::before{
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: -2;
    background: #dc5a45;
}
.button::after{
    content: "";
    display: block;
    width: 0%;
    height: 100%;
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: -1;
    background: #b53d2a;
    transition: all .3s ease-in-out;
}
.button:hover::after{
    width: 100%;
    left: 0;
    right: unset;
}

実装サンプルはこちら。

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

浮かせる

ホバーした時にボタンを浮かせるアニメーションはこちら。

.button{
    width: 250px;
    height: 50px;
    background: #dc5a45;
    text-decoration: none;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .3s ease-in-out;
    box-shadow: 0 5px 10px rgba(0,0,0,.05);
}
.button:hover{
    transform: translateY(-5px);
    box-shadow: 0 5px 10px rgba(0,0,0,.25);
}

実装サンプルはこちら。

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

押す

ホバーした時にボタンを押すアニメーションはこちら。

.button{
    width: 250px;
    height: 50px;
    background: #dc5a45;
    text-decoration: none;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .3s ease-in-out;
    box-shadow: 0 6px #b53d2a;
}
.button:hover{
    transform: translateY(3px);
    background: #c95542;
    box-shadow: 0 3px #b53d2a;
}

実装サンプルはこちら。

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

グラデーションが光る

ホバーした時にグラデーションが光るアニメーションはこちら。

.button{
    width: 250px;
    height: 50px;
    text-decoration: none;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .3s ease-in-out;
    background: linear-gradient(90deg, rgba(220,90,69,1) 0%, rgba(232,199,46,1) 50%, rgba(220,90,69,1) 100%);
    background-size: 200%;
    backgroud-position: left center;
}
.button:hover{
   background-position: right center;
}

実装サンプルはこちら。

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

アイコンが動く

ホバーした時にアイコンが動くアニメーションはこちら。

.button{
    width: 250px;
    height: 50px;
    background: #dc5a45;
    text-decoration: none;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}
.button::after{
    content: "";
    display: block;
    width: 15px;
    height: 15px;
    margin-left: 15px;
    background-image: url(https://irodori-design-web.com/blog_image/2964/icon_arrow.svg);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
    transition: all .3s ease-in-out;
}
.button:hover::after{
    transform: translateX(5px);
}

実装サンプルはこちら。

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

アイコンを拡大する

ホバーした時にアイコンが拡大するアニメーションはこちら。

.button{
    width: 250px;
    height: 50px;
    background: #dc5a45;
    text-decoration: none;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}
.button::after{
    content: "";
    display: block;
    width: 15px;
    height: 15px;
    margin-left: 15px;
    background-image: url(https://irodori-design-web.com/blog_image/2964/icon_arrow.svg);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
    transition: all .3s ease-in-out;
}
.button:hover::after{
    transform: scale(1.2);
}

実装サンプルはこちら。

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

アイコンが消えて再び出現する

ホバーした時にアイコンが消えて再び出現するアニメーションはこちら。

.button{
    width: 250px;
    height: 50px;
    background: #dc5a45;
    text-decoration: none;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}
.button::after{
    content: "";
    display: block;
    width: 15px;
    height: 15px;
    margin-left: 15px;
    background-image: url(https://irodori-design-web.com/blog_image/2964/icon_arrow.svg);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
    transition: all .3s ease-in-out;
}
.button:hover::after{
    animation: slide-out-in 0.6s ease-in-out;
}
@keyframes slide-out-in {
    40% {
        background-position: calc(100% + 15px) center;
    }
    50%{
        opacity: 0;
    }
    55% {
        background-position: calc(-15px) center;
    }
    60%{
        opacity: 1;
    }
}

実装サンプルはこちら。

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

まとめ

いかがでしたか?
基本的にどのデザインでも使えるようなものばかり集めてみました。
ボタンにホバーした時のアニメーションに迷った時、是非参考にしてみて下さい。