Style link as submit button - css

Question

I have a link and a submit button styled with the same .button class. Is there an easy way to make them look exactly the same (to have a same height)?
body .button {
text-align: center;
line-height: 15px;
background: #3333CC;
border-color: #5033CC;
border-radius: 4px;
color: #fff;
font-size: 11px;
border: 1px solid;
padding: 4px 7px 4px 7px;
cursor: pointer;
min-width: 90px;
text-decoration: none;
display: inline-block;
}
<form>
<a class="button" href="http://www.example.org">Link as button</a>
<input class="button" type="submit" value="button as button"/>
</form>
EDIT: I just found out that they look the same in Google Chrome, but not in Firefox.

Answer 1

In this example, they do have the same height (25pixels). You can always set a height in the CSS.
One thing you missed is changing the font-family.
In this example I've added one just to Helvetica, but that will make them more similar.
You can set box-sizing:border-box, set a solid height (25px in this example) and then change display:inline-block; to float:left;
body .button {
text-align: center;
line-height: 15px;
background: #3333CC;
border-color: #5033CC;
border-radius: 4px;
color: #fff;
font-size: 11px;
border: 1px solid;
padding: 4px 7px 4px 7px;
cursor: pointer;
min-width: 90px;
text-decoration: none;
float:left;
font-family:'Helvetica';
box-sizing:border-box;
height:25px;
}
<form>
<a class="button" href="http://www.example.org">Link as button</a>
<input class="button" type="submit" value="button as button"/>
</form>