GuirNab GuirNab - 5 months ago 17
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

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>

Comments