resizing a BUTTON through CSS

Question

I use jquery mobile to generate my buttons and I have a CSS code below to change its design but no matter what value i put in width and height the size of the button doesn\'

Answer 1

Made a small test for you, maybe it will help to start you off

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

just a input button and a little css

Updated

Added a example with JQuery 1.6.2 working fine aswell

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

Answer 2

The button might be an inline element. Make it an inline-block:

display: inline-block;

Answer 3

Live Example:

• http://jsfiddle.net/3EgrW/21/ (Width)
• http://jsfiddle.net/3EgrW/35/ (Height)

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%');

UPDATE: (I think this is what you're looking for)

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

<div data-role="page" id="home"> 
    <div data-role="content">
        <input type="button" id="theButton1" value="Press Me 1" />
        <input type="button" id="theButton2" value="Press Me 2" />
        <input type="button" id="theButton3" value="Press Me 3" />
        <input type="button" id="theButton4" value="Press Me 4" />
        <br />
        <a href="#" data-role="button" id="hrefButton1">HREF Me 1</a>
        <a href="#" data-role="button" id="hrefButton2">HREF Me 2</a>
        <a href="#" data-role="button" id="hrefButton3">HREF Me 3</a>
        <a href="#" data-role="button" id="hrefButton4">HREF Me 4</a>
    </div>
</div>