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

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

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

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

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

hoverの使い方

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

サムネイル画像をクリックすると拡大して見れます。

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

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

.sampale{
//通常時の指定//
}

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

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

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

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

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

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

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

BUTTON

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

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

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

.button p{
font-weight:bold;
color:#000;
font-size:1em;
}

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

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

文字の色を変える

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

BUTTON

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

この要領で以下サンプルもご紹介します。

要素の色を変える

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

BUTTON

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

薄くする

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

BUTTON

一般的に、一番使用されているように思います。

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

影をつける

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

BUTTON

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

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

FreeLaDay

要素や画像に影(ドロップシャドウ)を付けたい場合に役に立つbox-shadow。 ウェブサ […]…

ちょっとした合わせ技

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

.button p:hover{
color:#fff;
}

BUTTON

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

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

まとめ

hoverはボタンに限らず、画像やテキストなども指定可能です。

ユーザーの為にもリンク部分には、基本的にホバーの指定をするのがおすすめ!

それだけでサイトを訪問している人が迷うことなくスムーズにリンクを知ることが出来るので、

見栄えだけではなくユーザーの為にも是非とも活用してみてください。

FOLLOW ME
>フリーランス をもっと気軽に!

フリーランス をもっと気軽に!

現役フリーランサーによる役立つ情報サイト
主に『Web』に関する知識を掲載。

デザインやライティング術、コラムなどの
フリーランスが充実するような記事も掲載中。

CTR IMG