I created an oval button and in an element with 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 seem to be misunderstood.
This is 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 in the wild: https://www.frontiercomputercorp.com/
I suppose I did something wrong with a border radius unique to chrome, but I'm not qualified enough to find out if this is due to what I call the class.
Recall: in firefox, the oval button (as I wanted) In Chrome, it is rectangular
HELP!
source
share