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

著者:牧野健人

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

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

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

牧野健人

記事の著者牧野健人

株式会社リラクス 代表取締役。CRO・SEOを専門とし、デザイン・実装のスキルも活かしながら、クライアントの成果向上のための取組に尽力。
慶應義塾大学卒業後、行政機関を経て、デジタルマーケティングエージェンシーのアイレップにて運用型広告のクリエイティブプランニングに従事。2019年にリラクスを創業。

お問い合わせはフォームよりお願いいたします。

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

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

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

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

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

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

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

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

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

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

マウスオーバーのコーディングの基本は擬似クラス: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で作る:まとめ

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

お気軽にご相談ください

Webサイトに関する課題をお持ちの方はお気軽にご連絡ください。
課題が曖昧な状態でのご相談でも大丈夫です。

サイト改善のプロが無料で分析無料のWebサイト診断 無料相談・見積もり依頼
サイト改善のプロが無料で分析無料のWebサイト診断