CODEWITHSUNDEEP
cssprimefacesstyles
Programmer
Programmer

Reputation: 455

Flexible width of a button

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 ?

Upvotes: 0

Views: 5637

Answers (2)

Kevin Lynch
Kevin Lynch

Reputation: 24713

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; 
}

Upvotes: 1

AdityaSaxena
AdityaSaxena

Reputation: 2157

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>

enter image description here

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;
}

Upvotes: 1

Related Questions