CSS フレキシブルなボタンを作る
はてなで質問して得られた答えをそのまま備忘録として
記しておきます。
■質問URL http://q.hatena.ne.jp/1213770547
注意点は、ボタンの後に文章を続けると
ボタンの下に文章が隠れてしまうことです。
…テーブルを使うしかないようですね…。
IE7の場合
■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;
}