前の記事 «：CSSでオシャレな吹き出し形式のブロックを作成する「CSS Speech Bubbles」
次の記事 »：ブロック要素を動的にドラッグ＆ドロップでリサイズするサンプル「Custom Reading Containers」

Wiiブラウザ風CSSボタンを作成「Wii Buttons」

2007年02月19日

スポンサード リンク
Simple Round CSS Links ( Wii Buttons )
You may not get a Wii, but you can still get your own Wii Buttons with only 2 tags 1 image one CSS file .

Wiiブラウザ風CSSボタンを作成「Wii Buttons」。



CSSと画像が配布されており、実装方法は次のように簡単かつクリーン。
しかし、class名に button はちょっと使い勝手が悪そうなので、別名に変更した方がよいかもしれませんね。

<!-- アンカータグの場合 -->
<a class="button" href="?d=-1"><span>ボタンラベル</span></a>

<!-- フォームボタン -->
<span class="button"><input type="submit" name="foo" value="yout text" /></span>

<!-- 押せないボタン -->
<del class="button"><span>yout text</span></del>

フォームの投稿ボタンをWiiにするとなかなかオシャレかもしれませんね。
あと、このＣＳＳを参考に最近流行り（？）のWiiブラウザ用UIを作るのもありですね。

IE5.5、IE6、IE7、Firefox2、Opera9で動作確認が取れているようです。

関連エントリ

スポンサード リンク

投稿者 KJ : 2007年02月19日 12:04 | ブックマークに追加する Subscribe with livedoor Reader
間違いの指摘をしていただける方はメールでお願いします


本を執筆しました。