Webサイトを作っていると、ボタンにマウスを乗せたときに「指のマーク（カーソル）」が表示されるのを見かけたことはありませんか？
実はこの効果はとても簡単に実装でき、ユーザーに「ここはクリックできる場所ですよ！」と伝える大事なUXの工夫です。
この記事では、初心者の方でもHTMLとCSSだけでできる「指マークになるボタン」の作り方を、サンプルコード付きでやさしく解説します。
ボタンにマウスを乗せると指マークが出る仕組みとは？
ボタンにマウスを乗せると**指マーク（カーソル）**が表示されるのは、CSSの cursor プロパティを使って指定しているからです。
cursor: pointer;と指定すると、リンクやボタンに使われる「指マーク」になります。cursor: default;は通常の矢印カーソルです。- 他にも
cursor: move;やcursor: text;など、さまざまな種類があります。
HTMLとCSSで指マークになるボタンを作る手順
HTMLの基本コード
まずはHTMLにボタンを用意します。
See the Pen Untitled by VA-Rie (@VA-Rie) on CodePen.
class名は “glow-button” とつけました。
・classについての解説はこちら→HTMLのclassの使い方！を分かりやすく解説！
ここでは、class="glow-button" を付けて、CSSでデザインを加える準備をしています。
CSSで指マークを設定する
次にCSSを書いて、マウスを乗せたときに指マークを表示させます。
See the Pen Untitled by VA-Rie (@VA-Rie) on CodePen.
ここで重要なのは cursor: pointer; です。
これを指定するだけで、ユーザーがボタンにカーソルを合わせたときに「指マーク」が表示されます。
ホバー時にエフェクトを追加する（発展編）
よりわかりやすく「押せるボタン」と伝えるために、hover効果を加えるのもおすすめです。
See the Pen Untitled by VA-Rie (@VA-Rie) on CodePen.
関連記事👉・内部CSSの解説はこちら→超初心者向け！<style>タグを使ったCSSの書き方とは？
H2: まとめ
cursor: pointer;をCSSで指定するだけで、ボタンにマウスを乗せたときに指マークを表示できる- HTMLの
buttonタグやaタグに指定して使える hover効果を組み合わせると、よりクリックしやすいデザインになる
初心者の方でも数行のコードで簡単に実装できます。ぜひ自分のWebサイトでも試してみてください。
Comments