Border-Radius not working in Chrome link

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!

+4
source share
3 answers

, :

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

Chrome .

, . , Chrome . , Chrome.

+1

:

-webkit-appearance: button;
-moz-appearance: button;
appearance: button;
  • <a> - . . display: block , .
  • " , , .

( , , ):)

+1

Now CSS is now:

a.oval-box{
 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%;
 height: 4em;
 width: 12em;
 position: relative; }

a.oval-box:hover {
 color:#ffffff;
 background-color: #f00667e;
 text-decoration: none;
 border-color: #f89520;}

I launched this with a button so that I get stuck with the mouse. But, as you have already indicated, this is just a stylized block, and I don’t need a button command at all.

Thank.

0
source

Source: https://habr.com/ru/post/1664486/


All Articles