【html/CSS】ボタンにマウスが乗ったら指マークにする方法

「inputのボタンとbuttonタグをマウスを乗せたら指マークに変わるようにしてクリックできることがわかるようにしたい！」

ボタンにマウスが乗ったらマウスカーソルを指マークにする方法を解説します。

【結論】cursor:pointerを指定する

下記はinputのボタンとbuttonタグにcursor:pointerを指定したものです。

マウスを乗せると指マークになります。

buttonタグ

<style>
.example{
    cursor: pointer;
}
</style>
<input type="button" value="inputボタン" class="example">
<button class="example">buttonタグ</button>

cursorは指マーク以外にも様々なマークにできます。ラジオボタンなどlabelもクリックできることをわからせるようにもできます。

すべてのボタンに指定するとき

特定のボタンだけではなく、すべてのボタンで指マークにしたい場合、いちいちクラスをつけるのではなく、htmlタグのセレクタで指定すると便利です。

<style>
input[type="button"],input[type="submit"],button{
    cursor: pointer;
}
</style>
<input type="button" value="inputボタン">
<button>buttonタグ</button>

「:hover」は要らない

「:hover」はマウスを乗せたときだけにCSSを指定するときに使います。

ただしcursorは「:hover」がなくてもマウスを乗せたときカーソルが変化します。

マウスを乗せたとき、ボタンの背景(background)を変えたい、というときは「:hover」が必要です。

cursorはスマホでは効かない

cursorはマウスのアイコンを変更できます。

しかしスマホやタブレットなどマウスカーソルがない端末では当然無意味です。

「マウスカーソルを乗せればクリックできるかどうかわかる」と思ってはいけません。

クリックできるものは見た目だけで「クリックできそう」と判断できるようにしましょう。

逆にクリックできないものを「クリックできそう」と勘違いさせないことも重要です。

【まとめ】マウスが乗ったら指マークにする方法

CSSを下記のように指定する

input[type="button"],input[type="submit"],button{
    cursor: pointer;
}

以上、ボタンにマウスが乗ったら指マークにする方法でした。