CSS フレキシブルなボタンを作る

はてなで質問して得られた答えをそのまま備忘録として
記しておきます。
■質問URL http://q.hatena.ne.jp/1213770547


注意点は、ボタンの後に文章を続けると
ボタンの下に文章が隠れてしまうことです。
…テーブルを使うしかないようですね…。


IE7の場合



Firefox3の場合


■HTML
<button type="button"><span>テストボタン</span></button>


CSS
button{
background:transparent;
border:0pt none;
cursor:pointer;
margin:0pt;
padding:0pt;
text-align:center;
*width:1%; /*IEにのみ適用*/
}
button span{
cursor:pointer;
font-family:sans-serif;
font-size:12px;
line-height:23px;
border:1px solid #000;
background:#fbb;
padding:0px 8px;
display:block;
position:relative;
white-space:nowrap;
*float:left; /*IEにのみ適用*/
}
button:hover span{
color:#fdd;
background:#600;
}