Changing jQuery UI Button size?

I've been using the jQuery UI button all over my page, however I haven't found a way around what seems to be a simple problem. I want some of my buttons to be smaller than the other, this should be as simple as setting the CSS of the button text to something like, font: .8em; However jQuery UI takes your DOM element and wraps it:

<button class="ui-button ui-button-text-only ui-widget ui-state-default ui-corner-all">
   <span class="ui-button-text">Button Label</span>
</button>

So if I have a <button class="small-button">Small button!</button> jQuery will place the text in a child span. Any font size given to the small-button class will be ignored.

There's got to be a way around this without hacking at how jQuery makes its buttons. Any ideas?

If it's styling ui-button-text with font-size directly, you can override it at a higher level by applying !important. Such as:

.small-button {
   font-size: .8em !important;
}

EDIT: try setting a CSS style directly on .ui-button-text to inherit:

.ui-button-text {
   font-size: inherit !important;
} 

This should also make the !important on the .small-button irrelevant.

This helped decrease the height of the button for me (Smoothness theme default is line-height of 1.4):

.ui-button .ui-button-text
{
line-height: 1.0;
}

Here is what I use in my websites to setup the font-sizes so that my button sizes are the same as on the jQuery UI website. This works because it's exactly how the jQuery UI website does it!

/* percentage to px scale (very simple)
 80% =  8px
100% = 10px
120% = 12px
140% = 14px
180% = 18px
240% = 24px
260% = 26px
*/

body
{
	font-family: Arial, Helvetica, sans-serif;
	font-size:10px;
}

By setting the font-size properties like that for the body element, setting the font-size for everything else becomes trivial as 100% = 10px.

Just watch out for the cascading effect when using percentages - a child element's 100% will be equal to the parent element's font-size.

You can create different sized buttons by modifying the padding of the span element that is contained within the markup jQuery generates, as Tim suggests.

This markup/JavaScript...

$(document).ready(function(){
    $("button").button();
});

<button id="some-id" class="some-class">Some Button</button>

Results in this transformed markup...

<button class="some-class ui-button ui-widget ui-state-default ui-corner-all 
          ui-button-text-only" id="some-id" role="button" aria-disabled="false">
<span class="ui-button-text">some button</span>
</button>

Which most certainly includes the id and class tags which were originally supplied. You can modify the size of your buttons by adding more padding to the span.ui-button-text element.

Like So..

button#some-id .ui-button-text {
    /* padding values here to your liking */
}

Just change the button font-size ;).

<asp:Button ID="btn2" runat="server" Text="Button" style="font-size:10px" />

Now add a jquery script to the button

   <script type="text/javascript" language="javascript">
        $(document).ready(function () {
            $('input:submit, #btn2').button();
        });
    </script>

Good Luck. ;)

I used a combination of two suggestions above. It's pretty easy to tweak the UI just the way I like it.

To page's stylesheet add:

.ui-button .ui-button-text
{
   padding: 0px 11px 0px 21px !important;
   font-size: .72em !important;
}

I did this and it works fine.

$( "button" ).button("font-size", "0.8em");

My solution needed to work across the new menu items as well

The first to select the matching elements for both menu and button

.menu>.ui-button-icon-only,
.ui-button{
font-size:0.8em !important;
}

And the second as above to force inheiritance

.ui-button-text {
 font-size: inherit !important;
}

Use jQuery at runtime, without modifying CSS. This gives you a lot more flexibility.

$(function() {
  $("input[type=button]").css("font-size", "0.8em");
});

<input type="submit" value="Mostrar imágenes">

and my css:

input[type="submit"] {
color: #000;
border: 0 none;
cursor: pointer;
height: 30px;
width: 150px; }