Jquery Mobile button even more small [duplicate]

Question

Possible Duplicate:
resizing a BUTTON through CSS

In Jquery mobile a button can be created with:

<a href="index.html" data-role="button"                  >Yes</a>

A mini button can be created with data-mini="true":

<a href="index.html" data-role="button" data-mini="true">Yes</a>

How can I create a button even more small? (I know jquery mobile don't have for default a button even more small) (I just need it)

Answer 1

One way of doing it is to override the default css-style for the button size and add to your own CSS class which you then could set on the buttons you want smaller:

Css:

/* These values can be changed to preferred sizes */
.ui-mini.ui-mini-smaller .ui-btn-inner {
    font-size: 10px;
    padding: .45em 10px .4em;
}

Then use it like so:

<a href="index.html" data-role="button" data-mini="true" class="ui-mini-smaller">Yes</a>

See example here: http://jsfiddle.net/XVJem/3/