Style link as submit button

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.

• max: They look the same for me.
• Pranjal: They look the same already. Well, you can use a ui framework like bootstrap or can just use ui components like purecss.io/buttons
• Jaqen H'ghar: They dont look the same also in Chrome. Other than different fonts, there's a problem with the different width/height. It is caused because the browser calculates width/height as width + paddings + margins + borders for the button and not for the link. Adding box-sizing solves this issue. See my answer please

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>

• GuirNab: Thanks for ultra quick answer, but this still doesn't work in firefox (i.imgur.com/sMjmpFe.png).
• Albzi: Will look into it now :) @GuirNab