Border-Radius doesn't work in link button on Chrome

Question

I have styled an oval button and it in an a element with the class .button

It works and looks great on firefox, but I get a rectangular button in Chrome, without a border. The link still works but the border and border-radius seems to be misunderstood.

This is the CSS:

a.orange-circle-button {
-webkit-appearance: button;
-moz-appearance: button;
appearance: button;
box-shadow: 0 6px 9px 0 rgba(0,0,0,0.4);
border: .5em solid #00667e;
font-size: 1.2em;
text-transform: none;
text-align: center;
font-family: "lato", sans-serif;
line-height: 3em;
color: #ffffff;
background-color: #283f72;
margin: auto;
display: block;
border-radius: 50%;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-khtml-border-radius: 50%;
height: 4em;
width: 12em;
position: relative; }

Here is the HTML:

<a href="https://www.frontiercomputercorp.com/product-category/in-stock/" class="orange-circle-button" target="_blank">Current Stock</a>

This is it in the wild: https://www.frontiercomputercorp.com/

I am assuming I've done something wrong with the border-radius that's unique to chrome, but I'm not skilled enough to know if it's being caused by the way I'm calling the class.

To recap: In firefox the button is oval (as I wanted) In Chrome it is rectangular

HeLP!

Answer 1

Remove the following lines and it will be fixed:

-webkit-appearance: button;
-moz-appearance: button;
appearance: button;

I tested it in Chrome and it fixed the problem.

The appearance property is used to display an element using a platform-native styling based on the users' operating system's theme.Therefore it overrides your border-radius code as Chrome natively doesn't set border-radius for the button. By not to adding appearance or setting it to none, you won't have this problem in Chrome too.

Answer 2

Just delete these lines below:

-webkit-appearance: button;
-moz-appearance: button;
appearance: button;

1. <a> is a clickable type of element. A hyper-link. display: block will do what you want here.
2. "The appearance property is used to display an element using a platform-native styling based on the users' operating system's theme."

(I think they are still ugly, but that's not the point here :) )