Button size is different that's in styles
button, css
Solution
Buttons (and other inputs) don't follow the block model.
In order to adjust the size of a button, you may :
- use a padding in the button
- set `box-sizing: content-box;` to force the button to use the standard model
For the second solution, you may have to use the whole set of equivalent declarations :
a.button,
button {
...
box-sizing: content-box;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
}
EDIT :
a problem in adjusting this is that different browsers have different buttons.
So this works in Chrome/ubuntu : http://jsfiddle.net/HAB6W/
this works in FF/ubuntu : http://jsfiddle.net/Z5H5u/
I'm not sure it's a good idea to trying to get a precise look of a button. I know I use only standard elements (usually span) for buttons when I want to have a pixel-precise style.
NEW EDIT :
This may be useful : input type=submit text vertical alignment in Firefox
Problem
I'd like to style buttons and links to look the same and in general I've done this. But I can't make button and link look absolutely the same: - I set height of button to 25px, but it doesn't have 25px height, Firebug and Chrome shows 21px; - The same for width: it's 4 pixels smaller than I set; - Link has some strange margins around, while button doesn't, but I set margin to 0. Sounds insignificant, but when button and link are placed together, it's easily noted as bug in design (I added red lines where layout is broken). Login button is real button that submits form, and Register is a link to register page that looks like a button. Here Login button is 106x21 px, Register link is 110x25 px. Here are my styles: ``` a.button, button { display: inline-block; width: 110px; height: 25px; padding: 0; margin: 0; color: white; background: #7dbedb; /* Old browsers */ background: -moz-linear-gradient(top, #7dbedb 0%, #95c3ea 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7dbedb), color-stop(100%,#95c3ea)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #7dbedb 0%,#95c3ea 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #7dbedb 0%,#95c3ea 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #7dbedb 0%,#95c3ea 100%); /* IE10+ */ background: linear-gradient(to bottom, #7dbedb 0%,#95c3ea 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7dbedb', endColorstr='#95c3ea',GradientType=0 ); /* IE6-9 */ text-shadow: 1px 1px 1px #757575; filter: dropshadow(color=#000000, offx=1, offy=1); border: 2px solid #79cee6; border-radius: 2px; text-align: center; text-decoration: none; } ``` Usage: ``` <form ...> ... <button>Login</button> <a href="..." class="button">Register</a> </form> ``` In two words: I can't make <button> and <a> look perfectly the same. PS. I know I can use button everywhere with onclick event. As well as make all submit buttons as links with onclick event. But I wouldn't like to do this so no js will be required to submit a form or follow a link.