Search code examples
jqueryhtmljquery-uijquery-ui-button

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

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...

Solution

  • 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:

    enter image description here