CSSを使用してボタンスタイルをカスタマイズする

デフォルトのボタンスタイルにうんざりしていますか?スライドドア(Sliding doors)を使用して、従来のbuttonスタイルを置き換えることができます.まず、異なるシステムでデフォルトのボタンスタイルを見てみましょう.
 
実現する最終効果:Click me!
最初のステップはhtmlに次のコードを追加します:(copy&pasteを使用すると仮定します)I'm a button.
ステップ2では、CSSファイルに次のセクションを追加します.button {border:0; cursor:pointer; font-weight:bold; padding:0 20px 0 0; text-align:center;width:auto; overflow:visible;}
button span {position:relative; display:block; white-space:nowrap; padding:0 0 0 20px;}
button.submitBtn {background:url(images/btn_blue_right.gif) right no-repeat; font-size:1.2em;}
button.submitBtn span {height:30px; line-height:30px;background:url(images/btn_blue_left.gif) left no-repeat;color:#fff;}
button.submitBtn:hover {background:url(images/btn_blue_right_hover.gif) right no-repeat;}
button.submitBtn:hover span {background:url(images/btn_blue_left_hover.gif) left no-repeat;}
そのうちwidth:auto;overflow:visible;IEでのボタンずれ問題に対する修正であり、FFでの効果には影響しない.残念なことに、IEの下でhoverの効果がある場合は、追加のJavascriptを追加しなければ実現できません!
第3歩は、本明細書で提供する圧縮パッケージの4枚の画像をあなたのimagesフォルダに配置し、コードが間違っていなければ、ブラウザを開くと見えます.この効果の実現は完了し、自分の必要に応じてこの4枚の画像を置き換えることができます.
このインスタンスをダウンロード