Can I get the improved appearance of the jQueryUI button while limiting its size?

Question

I like the general look of the jquery ui button, but it is oversized for my purposes. Is there a way to replace the blah look of the generic jQuery button with the pizzazz of the jQueryUI button while restricting its outsizedness?

This jsfiddle shows the diff: http://jsfiddle.net/aSM2r/

(comment out the jQuery to see the generic button).

HTML:

<button>Czech this out</button>

jQuery:

$('button').button();

Also, when the button contains an anchor tag, the jQueryUIzed button lacks the underline - not sure if I mind about that, though...

Answer 1

Modify the css properties to reflect a smaller version of the button, note that I didn't specify anything concrete just reduced the original em values for padding, line-height and font-size, to give you a sleeker look.

Here's a fiddle

Here's the code:

.ui-button-text-only .ui-button-text{
    padding: .2em .5em;
    line-height:1.2;
    font-size:0.8em;
}

Here's the result:

Answer 2

Yes, just change the CSS for the button to whatever you like.