【CSS】hoverでオンマウス時にボタンに効果をつける方法

hover（ホバー）はリンクボタンなど、オンマウス時に要素を変化させることが可能な効果です。

ちなみにオンマウス状態とはカーソルがその要素の上に来ている状態。

この効果があることで押せるボタンとユーザーに認識させやすくなります。

今回は一番hoverを使う場面が多い「ボタン」を例に基本的なホバー効果をご紹介します。

【CSS】hover時の効果をふわっとさせる簡単な方法ボタンのオンマウス（ホバー）時の効果は、UXに置いてもリンクボタンだということが感覚で分かる為、webデザイン的にも有効です。 h...

効果をふわっとさせる方法をこちらの記事で書いています。

Contents

1 hoverの使い方
2 【コピペで使える】hoverのサンプル
3 まとめ

hoverの使い方

hoverのはリンクボタンなどカーソルがその要素に来たときに変化を加えることができる効果。

See the Pen poRaxOz by FLD (@freeladay) on CodePen.

例として上記のテキストにマウスを合わせてみてください。

リンクはついていますが、なんの変化も起きません。

See the Pen jOyZeQg by FLD (@freeladay) on CodePen.

今度はこちらのテキストにマウスを合わせてみると、テキストの色が変化します。

これがホバー効果です。

ホバー効果があれば「ここはクリックできるところ」と視覚的に分かりやすくなります。

基本的なコードの書き方は

CSS

.sampale{
 //通常時の指定//
}
.sample:hover{
 //ホバー時の指定//
}

ホバーは、オンマウス（カーソルが要素の上）とマウスアウト（カーソルが要素の上から離れる）の指定をします。

理由としては、基本的にサイト上では

通常時 → ホバー時 → 通常時

という動きをするのでどちらの指定もしておきましょう。

【コピペで使える】hoverのサンプル

今回はシンプルにこのボタンをサンプルにホバー効果をつけていきます。

See the Pen yLgvRrN by FLD (@freeladay) on CodePen.

コピペで簡単に実装できますので、ぜひ使ってみてください！

上記ボタン部分のサンプルのコードはこちら

HTML

<div class="button">
<p>BUTTON</p>
</div>

CSS

.button{
 width:300px;
 height:50px;
 border:solid 1px #000;
 font-weight:bold;
 color:#000;
}
.button p{
 font-weight:bold;
 color:#000;
 font-size:1em;
}

この状態ではカーソルを上に持っていっても何も起こりません。

ここにホバー時の設定を加え、オンマウス時の効果を加えていきます。

文字の色を変える

See the Pen jOyZQNO by FLD (@freeladay) on CodePen.

CSS

/*ホバー時の指定*/
.button p:hover{ color:#73abb8; }

ボタンの上にカーソルを持っていくとテキストの色が変わりましたね。

以下サンプルもご紹介します。

要素の色を変える

要素全体の色が変わります。

See the Pen
zYNRMGw by FLD (@freeladay)
on CodePen.

CSS

/*ホバー時の指定*/
.button:hover{ background:#73abb8; }

薄くする

See the Pen
bGgLQVX by FLD (@freeladay)
on CodePen.

CSS

/*ホバー時の指定*/
.button:hover{ opacity:0.5; }

一般的に、一番使用されているかもしれません。

シンプルでデザインを損ねないので使い勝手がとても良い効果の一つです。

影をつける

See the Pen
oNBEQxd by FLD (@freeladay)
on CodePen.

CSS

/*ホバー時の指定*/
.button:hover{
 box-shadow:0px 0px 10px #ccc;
}

浮いたような印象を与えることができます。

box-shadow(ドロップシャドウ)についてはこちらで詳しくご紹介してますので影の付け方の参考にしてみてくださいね！

【CSS】box-shadowで要素や画像に影をつける方法要素や画像に影（ドロップシャドウ）を付けたい場合に役に立つbox-shadow。ウェブサイトなどで背景とコンテンツ要素の境目に使った...

ちょっとした合わせ技

See the Pen
MWJQzjj by FLD (@freeladay)
on CodePen.

CSS

.button{
 width:300px;
 height:50px;
 border:solid 1px #000;
 font-weight:bold;
 color:#000;
}
.button p{
 font-weight:bold;
 font-size:1em;
}
/*ホバー時の指定*/
.button:hover{
background:#000;
box-shadow:0px 0px 5px #ccc;
color:#fff;
}

背景を黒にするとテキストが見えなくなってしまうので、ホバー時のテキスト色を変更し、さらにドロップシャドウ（影）効果も指定しています。

結構ボタン感が強まりましたね！