스타일 링크를 제출 버튼으로

Question

나는 동일한 .button 클래스로 스타일이 지정된 링크와 제출 버튼을 가지고 있습니다. 똑같이 보이게하는 쉬운 방법이 있습니까 (동일한 높이를 가짐)?

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>

편집

: 나는 단지 그들이 구글 크롬에서 동일하지만 파이어 폭스에서 볼 것을 알아 냈다.

Answer 1

이 예제에서는 높이 (25 픽셀)가 동일합니다. CSS에서 항상 높이를 설정할 수 있습니다.

한 가지 잊어 버린 것은 글꼴 모음을 변경하는 것입니다.

이 예에서는 Helvetica에 하나만 추가했지만 더 비슷하게 만듭니다. 당신은 box-sizing:border-box 설정할 수 있습니다

는, 그들은 나를 위해 같은 모양 고체 높이 (이 예에서는 25px) 다음 display:inline-block;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>