ボタンのマウスオーバー(ホバー)アニメーションをCSS&HTMLで作る【コピペOK】

実用的なマウスオーバーの表現10選

ボタンなどの要素にどのようなマウスオーバー(マウスホバー)の表現をつけるか悩むことも多いと思います。

そこでこの記事では、マウスオーバー(マウスホバー)の代表的な表現と、それを実装するためのCSSとHTML(コピペOK)を解説します。

あまり個性的なものだと実用性に欠けることもあるため、どのWebサイトにもそのまま入れやすいオーソドックスな表現を厳選してお届けします。

マウスオーバー(マウスホバー)とは?

まずは簡単に言葉の意味を確認しておきましょう。

マウスオーバーとは、マウスカーソルが(リンクなどのクリック可能な)要素の上に乗ることです。マウスホバーも同じ意味と考えて差し支えありません。

通常、クリック可能な要素の上にカーソルが乗った時その要素のデザインが変わるように設定します。そうした「反応」を返すことで、それがクリック可能な要素だとユーザーが直感的にわかるようするためです。

また、マウスオーバー(マウスホバー)によって要素のデザインが変わることをロールオーバーと言います。

つまり用語の意味をまとめると下記のようになります。

マウスオーバー(マウスホバー)
マウスカーソルが(リンクなどのクリック可能な)要素の上に乗ること
ロールオーバー
マウスオーバーによって要素のデザインが変わること

マウスオーバー(ホバー)の表現では個性を出し過ぎない

マウスオーバーの表現(つまりロールオーバー)は、個性が強いものは避けた方がよいでしょう。なぜなら、マウスオーバーに効果をつける目的はあくまでもインタラクション、つまりカーソルが要素に乗ったこと対する反応をユーザーに返すことであって、見た目の個性よりも機能面の方が重要だからです。

もちろん、サイト全体で確固たるブランドイメージを表現している場合、マウスオーバーの表現もそれに応じて個性的になることはあり得ます。しかし、それはあくまでも少数の事例にのみ当てはまることであり、普通のサイトでマウスオーバーの表現だけが個性的だと浮いてしまいます。ですので、基本的にはスタンダードな表現を採用するのがおすすめです。

マウスオーバー(ホバー)のコーディングの基本は擬似クラス”:hover”

マウスオーバー(ホバー)を実装する時は:hoverという擬似クラスを使います。これをセレクタに設定するだけで、ある要素のマウスオーバー時のスタイルを指定することができます。

例えば下記のように記述すれば、”btn”というクラスがついた要素のホバー時の背景色を赤にすることができます。

.btn:hover {
  background-color: red;
}

ボタンのマウスオーバー(ホバー)CSSアニメーションの表現10選

具体的なマウスオーバーのアニメーション表現を見ていきます。扱う技術はHTMLとCSSだけです。まずは共通して使う部分を確認しておきましょう。

<a class="btn" href="#">マウスオーバー</a>

上記の”#”をリンク先のURLに、”マウスオーバー”をボタンに表示したい文言に変更してください。

このリンク要素を修飾するCSSはアニメーションによって異なるため、以下でそれぞれ解説していきます。

少し透明になる

マウスオーバーで少し透明になる表現です。

マウスオーバー

.btn {
    background-color: #1492AF;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .2);
    color: #fff;
    display: inline-block;
    font-weight: 700;
    padding: 1.25rem 4rem;
    text-decoration: none;
    transition: .3s;
}

.btn:hover {
    opacity: .9;
}

色が変わる

マウスオーバーで色が変わる表現です。

マウスオーバー

.btn {
    background-color: #1492AF;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .2);
    color: #fff;
    display: inline-block;
    font-weight: 700;
    padding: 1.25rem 4rem;
    text-decoration: none;
    transition: .3s;
}

.btn:hover {
    background-color: #14AF65;
}

色が反転する

マウスオーバーで色が反転する表現です。

マウスオーバー

.btn {
    background-color: #1492AF;
    border: 3px solid #1492AF;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .2);
    color: #fff;
    display: inline-block;
    font-weight: 700;
    padding: 1.25rem 4rem;
    position: relative;
    text-align: center;
    text-decoration: none;
    transition: .3s;
}

.btn:hover {
    background-color: #fff;
    color: #1492AF;
}

字間が広がる

マウスオーバーで字間が広がる表現です。

マウスオーバー

.btn {
    background-color: #1492AF;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .2);
    color: #fff;
    display: inline-block;
    font-weight: 700;
    padding: 1.25rem 1rem;
    text-align: center;
    text-decoration: none;
    width: 260px;
    transition: .3s;
}

.btn:hover {
    letter-spacing: .3rem;
}

浮き上がる

マウスオーバーで浮き上がる表現です。

マウスオーバー

.btn {
    background-color: #1492AF;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .2);
    color: #fff;
    display: inline-block;
    font-weight: 700;
    padding: 1.25rem 4rem;
    text-decoration: none;
    transition: .3s;
}

.btn:hover {
    box-shadow: 0px 12px 24px rgba(20, 146, 175, 0.38);
    transform: translateY(-4px);
}

沈む

マウスオーバーで沈む表現です。

マウスオーバー

.btn {
    background-color: #1492AF;
    box-shadow: 0px 12px 24px rgba(20, 146, 175, 0.38);
    color: #fff;
    display: inline-block;
    font-weight: 700;
    padding: 1.25rem 4rem;
    text-decoration: none;
    transition: .3s;
}

.btn:hover {
    box-shadow: 0 1px 4px rgba(0, 0, 0, .2);
    transform: translateY(4px);
}

押し込まれる

マウスオーバーで押し込まれる表現です。

マウスオーバー

.btn {
    background-color: #1492AF;
    border-bottom: 4px solid #056d84;
    color: #fff;
    display: inline-block;
    font-weight: 700;
    padding: 1.25rem 4rem;
    text-decoration: none;
    transition: none;
}

.btn:hover {
    border-bottom: 0;
    transform: translateY(4px);
    margin-bottom: 4px;
}

グラデーションが単色になる

マウスオーバーでグラデーションが単色になる表現です。

マウスオーバー

.btn {
    background: linear-gradient(110.85deg, #1492AF 0%, #11af75 100.19%);
    box-shadow: 0 1px 4px rgba(0, 0, 0, .2);
    color: #fff;
    display: inline-block;
    font-weight: 700;
    padding: 1.25rem 4rem;
    text-decoration: none;
    transition: none;
}

.btn:hover {
    background: #1492AF;
}

単色がグラデーションになる

マウスオーバーで単色がグラデーションになる表現です。

マウスオーバー

.btn {
    background: #1492AF;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .2);
    color: #fff;
    display: inline-block;
    font-weight: 700;
    padding: 1.25rem 4rem;
    text-decoration: none;
    transition: none;
}

.btn:hover {
    background: linear-gradient(110.85deg, #1492AF 0%, #11af75 100.19%);
}

下線が引かれる

マウスオーバーで下線が引かれる表現です。

マウスオーバー

.btn {
    background-color: #1492AF;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .2);
    color: #fff;
    display: inline-block;
    font-weight: 700;
    padding: 1.25rem 4rem;
    text-decoration: none;
}

.btn:hover {
    text-decoration: underline;
    text-underline-offset: 4px;
}

ボタンのマウスオーバー(マウスホバー)の表現をCSS&HTMLで作る:まとめ

マウスオーバー(マウスホバー)の表現について、実用性の高いものを厳選して解説しました。インタラクションをしっかり設定することでユーザーがサイトの仕様を理解しやすくなるため、ぜひご活用ください。