Flexible width of a button - css

Question

I am using below CSS for my button
.ui-button-text {
background-color:#3e9cbf !important;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #F0F8FF !important;
width: 50px;
}
Here if you will check ,i am using width: 50px; but i want the width of button shuold be flexible it should change width according to text size if button text is Submit then button width will small but if text is something like this Post Your Question now button width should change.
How can we achieve this with css ?

Answer 1

If you are using a div then you need to set it to display:inline-block then you do not need to set a width.
DEMO http://jsfiddle.net/kevinPHPkevin/kw3La/
.ui-button-text {
background-color:#3e9cbf !important;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #F0F8FF !important;
padding: 10px;
display:inline-block;
width: auto !important;
}

Answer 2

Do it like this: demo
CSS:
.ui-button-text {
background-color:#3e9cbf !important;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #F0F8FF !important;
padding:2px 6px;
}
html:
<button class="ui-button-text">Submit</button>
<button class="ui-button-text">Post your question</button>
However if you're talking about overriding the css that is coming from .ui-button-text, then do as here : http://jsfiddle.net/bcqPG/1/
CSS:
.ui-button-text {
background-color:#3e9cbf !important;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #F0F8FF !important;
width:50px;
}
button.ui-button-text{
width:auto;
padding:2px 6px;
}