テクノロジー観測所

ここに次のようなボタンがあります。

 
マウスカーソルを重ねると、ポインターが「矢印」から「指」に変化しませんでしたか？

これがCSSの「cursor: pointer」です。

マウスカーソルのポインターを変更するCSS「cursor:pointer」

このボタンは次のコードで作成しています。

HTML部分

<div id="btn_sample_01">
<a href="./">トップページへ</a>
</div>

URL部分「./」は相対指定です、アレゲなニュースサイトへのリンクではありません（笑）

CSS部分

#btn_sample_01 {
  margin: 10px auto; /* divの輪郭の外側の余白。縦10px、横自動（中央寄せ） */
  padding: 10px; /* divの輪郭と文字との間（内側）の余白 */
  display: block; /* ブロックレベル要素にすることでdivの幅をテキストの長さに合わせる */
  width: 200px; /* 全体の横幅 */
  text-align: center; /* このdivの中に入れる文字を中央寄せにする */
  background-color: #16a085; /* このdiv領域の背景色 */
  border-radius: 4px; /* このdiv領域の輪郭を曲げる */
  cursor: pointer; /* マウスカーソルを「ポインター」にする */
}
#btn_sample_01 a {
  text-decoration: none; /* リンクにつく下線を消す */
  color: white; /* 文字色を上書き */
  font-weight: bold; /* 太字にする */
}

ポイントは<a>ではなく<div>につけること

両方のボタンを比べてみます。

悪い例では<a>タグに対し cursor:pointer を指定しています。
良い例では<div>タグに対し cursor:pointer を指定しています。

これのどこが違うのかは、マウスカーソルを乗せてみればわかります。

悪い例、<a>タグにつけたほうは文字部分でしかカーソルが変化しないはずです。
対して良い例、<div>タグにつけたほうは緑色のボタン領域全てでカーソルが変化するはずです。

このようにCSSは適用する場所も考える必要があります。

:hoverを付け足してよりリアルなボタンにする

このボタンにマウスカーソルを乗せると押し込まれたように動きます。

HTML部分

<div id="btn_sample_02">
<a href="./">トップページへ</a>
</div>

※ボタン部分の装飾は同じですが、動きを説明するためにsample_02と別のidをつけています。

CSS部分

#btn_sample_02 {
  margin: 10px auto;
  padding: 10px;
  display: block;
  width: 200px;
  text-align: center;
  background-color: #16a085;
  border-radius: 4px;
  cursor: pointer;
}
#btn_sample_02 a {
  text-decoration: none;
  color: white;
  font-weight: bold;
}
#btn_sample_02:hover {
  position: relative;
  top: 2px;
  left: 2px;
}

ボタンを構成するdiv要素の id=”btn_sample_02″ に :hover 擬似クラスを付け足します。

:hover とは、「マウスカーソルを乗せた時」に適用されるCSSを追加できるものです。

:hoverにはまず最初に「position:relative」を指定して相対位置を取ります。こうすることで「top」「left」プロパティによる位置指定が可能になります。

あとはずらしたいぶんだけ数値を指定してやれば完成です。

box-shadowプロパティを使って立体的に見せたり影をつけたりする方法や、borderプロパティを使って輪郭をつける方法など、ボタンをリアルに見せる工夫はこれ以外にもいくつかあります。

ですが「cursor:pointer」と「:hover」だけでも立派に通用するボタンを作ることができます。

マウスオーバーではなく「クリックした時」に発動するCSS「:active」

※このボタンはクリックしてもページ遷移などはしませんので思う存分押してください。

今度は「マウスを乗せた時」ではなく「クリックした時」に押し込まれたような動きを追加しました。

そのかわりマウスを乗せた時（:hover）には色を変更するCSSを指定しています。マウスを乗せると少し色が薄くなるかと思います。

HTML部分

<div id="btn_sample_03">
<a href="javascript:void(0);">クリックしてネ！</a> <!-- 「何もしない」スクリプト -->
</div>

※今度も他のボタンと区別するため新しいIDを振っています。

CSS部分

#btn_sample_03 {
  margin: 10px auto;
  padding: 10px;
  display: block;
  width: 200px;
  text-align: center;
  background-color: #16a085;
  border-radius: 4px;
  cursor: pointer;
}
#btn_sample_03 a {
  text-decoration: none;
  color: white;
  font-weight: bold;
}
#btn_sample_03:hover{
filter:alpha(opacity=80); /* IE向けに透過率80%を指定 */
opacity:0.8; /* 透過率80%を指定 */
}
#btn_sample_03:active {
  position: relative;
  top: 2px;
  left: 2px;
}

:active 擬似クラスをつけ、動きを指定します。指定方法は :hover と一緒です。

ボタンの隅までリンクを適用するには

基本的な構造として<div>タグで作った背景の中に<a>タグがあるので、当然リンク部分は<a>タグの領域、つまり文字の部分だけということになります。

ならばいっそ<a>タグで<div>を囲ってしまえばいいというわけで、配置を逆転させます。

HTML部分

<a href="javascript:location.reload();" style="all:initial;color: white;font-weight: bold;">
<div id="btn_sample_good">良い例</div> 
</a>

良い例

ちなみにこのボタンは押すとページを更新します。

なお、CSSの指定を全部classではなくidで行ったのには理由があります。

こちらもあわせてご覧ください。

aタグの加工・装飾（CSS）にclassではなくidを使うべき理由