Font-Size for Button and Link

Question

I try simple html:

TEST FONT SIZE</br>
<input type="button" value="test bytton" style="font-size:20px">
<a style="font-size:20px">test link</a>

and found out that font-size of button looks like bigger then font-size of link in spite of style. Does anybody know why style works differently for link and for button. And how to make them looks like the same?

Answer 1

You should not use much CSS for buttons, because their display depends on the users operating system.

Instead you can use for example images.

Answer 2

The font-size is the same. But it looks different because the default page font is different from the default input-field font. Set the font-family on both elements the same and they'll look the same.

I usually do:

body, input, button, select, option, textarea {
    font-family: ...; /* whatever font */
}
body {
    font-size: x%; /* whatever base font size I want */
}
input, button, select, option, textarea {
    font-size: 100%;
}

to get consistent fonts over the page and form fields.

Answer 3

Looks the same to me, tested on Firefox, IE6 and Chrome: http://jsbin.com/oveze
Please keep in mind:

• This depends on the browser and its defaults, and may also be different depending on the operating system.
• Very often there's a different font for buttons and input fields. Set it too.
• Anti-aliasing or ClearType can cause a slight difference when you don't have the same colors (background and font).