フレキシブルCSSボタン画像なし

Question

あなたの脳が必要です！

私は、CSS3のように、画像のないボタンを作ることを望んでいます。このボタンは、ボタン内の言葉遣いに基づいてスケールされます。私はいくつかのことを試しましたが、何かを得ることができません。例については

： ボタンが言う95px

の最小幅を持っており、それが家庭用または米国 ABOUT素晴らしいことだが、私は ダラス市議会のチームのように

あるコピーを持っている場合、それは次のようになりボタンが広くなると素晴らしいです。

誰もがこれを手伝ってくれますか？かわいい？私は自分を狂わせた！

ありがとうございました！

Answer 1

これで、それをスタイルべきではありません私の問題を解決する方法です。私は好きではないほど美味しくないが、それはうまくいくだろう。私は最小幅を設定するのに問題があったので、私は利用可能なすべてのスペースであるため、すべてを固定幅200に変更しました。あなたがDISPLAY：INLINE-BLOCKを取り除くと言われています。メニューボタンのコピーに基づいたスケーリングに戻ります（たとえ幅を200ピクセルにしてもそこにあります）

すべてのリンクが青でdidn '非常にうまく表示されますが、それは簡単なコピー、名前の変更と色の変更に過ぎませんでした。

ご協力いただきありがとうございます。私は本当にそれを感謝します。将来この覗きに役立つことを願っています。

.left_menu_btn_css { 
 
    background: #39a7f0; 
 
    background-image: -webkit-linear-gradient(top, #39a7f0, #2979ab); 
 
    background-image: -moz-linear-gradient(top, #39a7f0, #2979ab); 
 
    background-image: -ms-linear-gradient(top, #39a7f0, #2979ab); 
 
    background-image: -o-linear-gradient(top, #39a7f0, #2979ab); 
 
    background-image: linear-gradient(to bottom, #39a7f0, #2979ab); 
 
    -webkit-border-radius: 5; 
 
    -moz-border-radius: 5; 
 
    border-radius: 3px; 
 
    font-family: Arial; 
 
    color: #ffffff; 
 
    font-size: 12px; 
 
    padding: 5px 5px 5px 5px; 
 
    text-decoration: none; 
 
    width: 200px; 
 
    display: inline-block; 
 
} 
 

 
.left_menu_btn_css:hover { 
 
    background: #3cb0fd; 
 
    background-image: -webkit-linear-gradient(top, #3cb0fd, #3498db); 
 
    background-image: -moz-linear-gradient(top, #3cb0fd, #3498db); 
 
    background-image: -ms-linear-gradient(top, #3cb0fd, #3498db); 
 
    background-image: -o-linear-gradient(top, #3cb0fd, #3498db); 
 
    background-image: linear-gradient(to bottom, #3cb0fd, #3498db); 
 
    text-decoration: none; 
 
}

Answer 2

私は完全にあなたの質問を理解していないが、あなたは、ボタンのテキストに応じて、ボタンクラスの規模を作りたい場合、あなたはそれを任意の幅を与え、ちょうどパディング