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

B L O G

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

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

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

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

そんな時のためにコピペですぐに使えるボタンにホバーした時の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.

まとめ

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

関連記事一覧

【テクニック】CSSで半円・縁取り・弧を作る方法
【テクニック】CSSで半円・縁取り・弧を作る方法

CSSは様々な形を作ることが出来ます。正円はもちろん、半円、縁取りの半円、半円の弧の部分などデザイナーが作るデザインに合 […]
【コピペOK】画像にホバーした時のCSSアニメーション20選
【コピペOK】画像にホバーした時のCSSアニメーション20選

Webサイトにはブログのサムネイル画像等、画像にリンク設定することがよくありますね。デザイナーからホバーアニメーションが […]
【CSS】z-indexが効かない時の原因と解決方法
【CSS】z-indexが効かない時の原因と解決方法

CSSのプロパティのひとつ「z-index」。このプロパティは要素同士の重なり順を指定する場合に使用します。基本的に数値 […]
【CSS】各プロパティの初期値一覧
【CSS】各プロパティの初期値一覧

CSSを使用している際、プロパティの値を初期値に戻したいと思うことが多々あります。このプロパティの初期値って何だったかな […]
【コピペOK】WEBサイトでよく使う見出しデザイン
【コピペOK】WEBサイトでよく使う見出しデザイン

WEBサイトを制作している際、ついつい迷ってしまったり、ワンパターンになってしまう見出しのデザイン。ワンパターン化してし […]
【background-image】CSSだけでストライプ（ボーダー）を作る方法
【background-image】CSSだけでストライプ（ボーダー）を作る方法

デザイナーが作ったデザインに変わった模様の背景があった場合、画像として表示しますよね。しかし、中には知らなければついつい […]
【コピペOK】HTMLとCSS​で作る図形：サンプルコード集
【コピペOK】HTMLとCSS​で作る図形：サンプルコード集

WEBサイトを作成していると様々な形状の要素を作成することになりますよね。画像として作成してしまえば簡単ですWEBサイト […]
【コピペOK】CSSでの吹き出しの作り方
【コピペOK】CSSでの吹き出しの作り方

WEBサイトで吹き出しを作りたいと思った際、実はCSSだけで吹き出しを作ることは出来るんです。今回の記事ではCSSでの吹 […]
【background-image】CSSだけでストライプ（ボーダー）やドット模様を作るサンプル集
【background-image】CSSだけでストライプ（ボーダー）やドット模様を作るサンプル集

CSSのbackground-imageを使うことでストライプ（ボーダー）やドット模様など意外と色んな背景模様を作ること […]
【テクニック】aタグのリンクを無効にする方法
【テクニック】aタグのリンクを無効にする方法

HTMLタグのaタグは別のページへ遷移させるための専用タグです。基本的にはaタグは別ページへ遷移させる目的で使用するため […]
【CSS入門】backgroundで2色や3色を指定する方法
【CSS入門】backgroundで2色や3色を指定する方法

backgroundプロパティを使うことで2色、3色、もしくはそれ以上の色を同時に指定することが出来ます。この記事ではb […]
【徹底解説】CSSのみでネスト化対応！SCSSとの類似点と違い
【徹底解説】CSSのみでネスト化対応！SCSSとの類似点と違い

はじめてGoogle Chromeで実装されて以来、2023年ついに主要全ブラウザでSCSSを使わなくてもCSSだけでネ […]