How to stretch the form submit button using CSS?

Question

Hi again,

how do I stretch a form submit button using CSS? I'd like to have some kind of horizontal padding between the text inside the button and the button left and right end. Is this possible, and if so, how?

Tips for making the button prettier (without using images) are also much appreciated :-).

Answer 1

Increase the width of the button.

<input type="submit" class="btn" />

CSS:

.btn{
  width:250px; /* adjust value */
}

Answer 2

You can style it like any other HTML element, for example give it display:block and width:100%.

Answer 3

CSS:

input[type="submit"] {width: 100%;} /* to stretch all submit buttons to full page width, or use width: 300px; as Sarfraz suggested. */

does not work in IE6 cause it does not read type="submit" selector, but works on IE7/8 and all other browsers.