Границы кнопок CSS, не работающие в Chrome

Question

У меня есть простой веб-сайт, содержащий кнопку со ссылкой, в стиле CSS.

<div id="contact_button"> 
    <a href="mailto:contact@fakemail.com" class="button">CONTACT</a> 
</div> 

Граница отображается только в IE и Firefox, но не отображается должным образом в Chrome (на мобильном или на рабочем столе). Есть предположения?

a.button { 
    -webkit-appearance: button; 
    -moz-appearance: button; 
    appearance: button; 

    -webkit-transition-duration: 0.4s; /* Safari */ 
    transition-duration: 0.4s; 

    margin: 0 auto; 
    width: 143px; 
    display: block; 

    background-color: #FFF; /* White */ 
    border: 2px solid black; 
    color: #000; 
    padding: 15px 32px; 
    text-align: center; 
    text-decoration: none; 
    font-size: 16px; 
} 

a.button:hover { 
    background-color: #000; /* Black */ 
    color: white; 
} 

Answer 1

Удаление стиля -webkit-appearance: button; из селектора a.button, я вижу тот же результат (белый фон и 2рх ширины черной рамкой) как в Chrome и в Firefox.