GuirNab GuirNab - 1 year ago 71
CSS Question

Style link as submit button

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 Source

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>