ボタン上でマウスカーソルがリンク上と同じ「指」の形になるようにする方法

今回は、ボタン上にマウスカーソルを持っていったときに、マウスカーソルが「指」の形になるようにするカスタマイズ方法をご紹介します。

アメブロカスタマイズのわざめーばです。

こんにちは。

アメブロの新デザインでは、基本的にボタン類は画像あるいはCSSで装飾したリンクになったため、ボタン上にマウスカーソルを持っていくと当然「指」の形になります。

ところが、カスタマイズでメルマガ登録フォームなどを表示した際には、画像ではなく通常のフォーム要素としてのボタンが使われることが多いため、ボタン上でマウスカーソルが「指」の形にならず、違和感を感じることがありませんか?

そこで、今回は、ボタン上にマウスカーソルを持っていったときに、マウスカーソルが(リンク上と同様)「指」の形になるようにするカスタマイズ方法をご紹介します。

やり方は簡単で、以下の内容をユーザーCSSの末尾に追加すれば完了です。

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

ちなみに、マウスカーソルを標準のものと異なるものにすることを嫌う方は非常に多いですが、個人的には、

「これだけはやっておいた方がいいかも」

という気がしています。

マウスカーソルが「指」の形になると、ボタンがクリックできるということが直感的にわかりやすいですから。

飽くまでも個人的な考えですが。

以上、ボタン上にマウスカーソルを持っていったときに、マウスカーソルが「指」の形になるようにする方法をご紹介しました。

よかったら参考になさって下さい。

関連記事

CSSの編集によるカスタマイズ

アメブロカスタマイズで人の集まるブログ作り