cambiar el tamaño de un BOTÓN a través de CSS

Utilizo jquery mobile para generar mis botones y tengo un código CSS a continuación para cambiar su diseño, pero no importa qué valor ponga en ancho y alto, el tamaño del botón no cambia, pero es relativamente dependiente del tamaño de la fuente de la etiqueta. ¿Cómo puedo cambiar esto para poder cambiar el tamaño del botón, independientemente del tamaño de la fuente de la etiqueta?

$("#ui-1").css({'position':'absolute','left':'27.0px','top':'51.0px','width':'120.0px','height':'30.0px',}); $("#ui-1 .ui-btn-text").css({'font-family':'"Calibri","Arial","Sans Serif"','font-size':'0.75em','color':'black','text-align':'left','wordwrap':'normal','text-shadow':'1px 1px 1px #FFFFFF'}); 

Ejemplo en vivo:

JS:

 // For all buttons use something like this $('.ui-btn').css('width','50%'); // For individual buttons use something like this $('#theButton1').parent().css('width', '75%'); // Or this for HREF data-role buttons $('#hrefButton4').css('width', '45%'); 

ACTUALIZACIÓN: (Creo que esto es lo que estás buscando)

 // this changes the height for all buttons $('.ui-btn-text').css('font-size','50px'); // This changes the height for a single element $('#hrefButton3').children().children().css('font-size','30px'); 

HTML:

  

Hice una pequeña prueba para ti, tal vez te ayude a comenzar

http://jsfiddle.net/3EgrW/1/

solo un botón de entrada y un poco de CSS

Actualizado

Se agregó un ejemplo con JQuery 1.6.2 funcionando bien también

http://jsfiddle.net/3EgrW/2/

El botón podría ser un elemento en inline . Convertirlo en un inline-block :

 display: inline-block;