html - CSS Button Borders Not Working In Chrome -
i have simple website, contains button link styled css.
<div id="contact_button"> <a href="mailto:contact@fakemail.com" class="button">contact</a> </div>
the border displays fine on ie , firefox, not displaying on chrome (mobile or desktop). thoughts?
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; }
removing style -webkit-appearance: button;
selector a.button
, see same output (white background , 2px-width black border) both in chrome , in firefox.
Comments
Post a Comment