title: Changing jQuery UI Button size?
body: <p>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, <code>font: .8em;</code> However jQuery UI takes your DOM element and wraps it:</p>
  
  <pre><code>&lt;button class="ui-button ui-button-text-only ui-widget ui-state-default ui-corner-all"&gt;
     &lt;span class="ui-button-text"&gt;Button Label&lt;/span&gt;
  &lt;/button&gt;
  </code></pre>
  
  <p>So if I have a <code>&lt;button class="small-button"&gt;Small button!&lt;/button&gt;</code> jQuery will place the text in a child span. Any font size given to the <code>small-button</code> class will be ignored.</p>
  
  <p>There's got to be a way around this without hacking at how jQuery makes its buttons. Any ideas?</p>