擬似ボタン

スタイルシートとイベント属性による「擬似ボタン」。画像やフォームを使わずに、ボタンと同様な効果を目指しました。

割とボタンらしい動きが表現できているのではないかと思います。

画像式のボタンに比べて、メニュー構成などが変化しても変更が容易ですし、ブラウザで画像表示をしない設定にしていても、ボタンとして表示ができます（私自身が、よく「画像表示無し」で閲覧しています）。

また、擬似ボタンの大きさを相対値「ｅｍ」で指定したので、ブラウザで「文字のサイズ」を変更すると、擬似ボタンの大きさもそれに追随します。

ポイントした時、擬似ボタン内の文字は変えない

ポイントした時、擬似ボタン内の文字を太字に

メニューに使用したとき、現在表示中のページがどのボタンからのリンクかを案内するのに使えるかと思い、作ってみました。

トグル式ボタン（一度押すと凹んだままとなり、もう一度押したり他のボタンを押すと元に戻る）のイメージです。画像式のボタンだと、もう一枚画像を用意する必要があります。

ついでに横方向へのレイアウトも考えてみました。

<span> タグで横に並べ、<div> タグでブロックレベル化

<body> ～ </body> 内にいきなりインラインレベル要素は記述できないので、<div> タグでまとめています。

テーブルでレイアウト

テーブルをレイアウト調整の目的で使用するのは、あまり宜しくないようですが、段落やテーブルなどのブロックレベル要素を横方向にレイアウトする方法を他に知らないので、このパターンも作ってみました。

実際にリンクを設定してみます。

ボタン内の余白にポイントしたときは、ステータスバーにリンク先のＵＲＬが表示できません。<a> タグのリンク文字にマウスカーソルがポイントされていないからですが、「ボタンの真ん中辺りでクリックするよね？」という前提で妥協しました（＾＾）。

ボタン内の余白をクリックしたときのリンク先指定には、onclick="location.href='～'" を使っています。

擬似ボタンの背景に画像を指定してみます（擬似ボタンの作成動機と少々矛盾しますが．．．）。

ブラウザで画像表示をしない設定にした場合は、背景色の指定が有効になるようです。

説明