Change Button Font-Size?

HTML & CSS
1

Is it possible to increase the Font-Size of an Input Button…


	<input type='submit' name='submit' value='Reply' />

Supposedly I am using this…


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

Sincerely,

Debbie

2

Apply a CSS font-size to the <input> tag. The larger the font size, the bigger the button.

3

That was surprisingly easy! :blush:

Is there anyway to know what the default Font-Styles are for <input> Buttons?

Sincerely,

Debbie

4

It typically defaults to the font size of the body. And that can vary slightly from browser to browser.

5

What are your thoughts on tweaking the default Form Button Font Size/Styles?

Normally, I am okay with the default silver/gray buttons that come along with <input>, but for some reason on my Private Message form, the Button’s font-size seems smaller than the text in an adjacent hyperlink, so I increased the Button’s font-size a smidge.

Here is what it looks like after I changed things…

(see screenshot)

Sincerely,

Debbie

6

Yes, the font-size of the button text is always a fraction smaller than the normal text. I think it is to fit a button in a normal text-line (if the line-height is not too small).
Your tweaking looks fine. :slight_smile:

7

Don’t forget you can always use a BUTTON tag instead of an INPUT tag…

<button type="submit">Reply</button>
8

That’s HTML5, right?

If so, I’m not into “technology”. I like HTML4 just fine! :wink:

Sincerely,

Debbie

9

Nope, been around for quite a while.
Just totally underused and underrated

HTML4.01 (1999) http://www.w3.org/TR/REC-html40/interact/forms.html#h-17.5

10

What are the merits of using the <button> tag versus the <input> tag like I did?

Also, what does the <button> tab look like when it is displayed?

I mean does it come “pre-styled” by the System? Or is it blank and you have to make it into something?

Sincerely,

Debbie

11

The button element is significantly more flexible in terms of cross-browser CSS styling. The input element is somewhat limited and results vary across browsers.

Also: http://www.sitepoint.com/forums/showthread.php?769898-button-vs-input-type-quot-button-quot&p=4915729&viewfull=1#post4915729

12

Thanks for the links.

When I have time, I’ll have to edamucates myselfs on <button>!! :smiley:

Sincerely,

Debbie