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...
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.
.ui-button-text-only .ui-button-text{
padding: .2em .5em;
line-height:1.2;
font-size:0.8em;
}