CSS Button effects not working across browsers

[j7f4f2a4fds2]

Having a few issues with a CSS Button effects not working across browsers.

It displays as I would like it in Chrome, but not Firefox.

Can’t seem to find the root of the problem. Here is what I have.

Fiddle

<a class="soft">Button</a>

a.soft {display: inline-block;font-family:'Varela Round', sans-serif;padding:2rem3rem;font-size:1.25vw;box-shadow:-10px-10px20px0#E6E6E6,10px10px20px0#ABABAB, inset 10px10px20px0#E6E6E6, inset -10px-10px20px0#ABABAB;border-radius:50px;transform: box-shadow 1s ease-in-out;background-color:#666666;-webkit-background-clip: text;color: transparent;text-shadow: rgba(245,245,245,1.0)2px2px5px;font-weight: bolder;}

a.soft:hover {background-color:#ddd;box-shadow:-10px-10px20px0#E6E6E6,10px10px20px0#ABABAB, inset 10px10px20px0#E6E6E6, inset -10px-10px20px0#ABABAB;color:#888;}

a.soft:active {box-shadow:0020px0#E6E6E6,0020px0#ABABAB, inset 0020px0#E6E6E6, inset 0020px0#ABABAB;color:#D8D8D8;text-shadow:1px1px2px white;-webkit-background-clip: text;font-weight: bolder;}

[PaulOB]

I can’t access your fiddle to double check (as on a mobile at the moment) but the code you posted above is not valid as you have removed the spaces between values.

https://jigsaw.w3.org/css-validator/

Validate and fix the errors and try again.

You also need to add the href attribute to the anchor.

[j7f4f2a4fds2]

thanks @PaulOB
I managed to find a firefox specific rule which corrected everything.

@-moz-document url-prefix() {
  a.soft {
    background-color: #ddd;
    box-shadow: -10px -10px 20px 0 #E6E6E6,
      10px 10px 20px 0 #ABABAB,
      inset 10px 10px 20px 0 #E6E6E6,
      inset -10px -10px 20px 0 #ABABAB;
    color: #888;
  }
}

[PaulOB]

@j7f4f2a4fds2

I managed to find a firefox specific rule which corrected everything.

Looks like its a bug in Firefox with background-clip where the background is spreading under the inset borders in Firefox only.

You probably don’t need to restate the box-shadow rules unless you are changing them from the original. Just change the color and background.

PS don’t forget to include the real property and not just the -webkit prefix or it may stop working one day or at least not follow the final spec as has happened with many prefixes :;

[Gandalf]

[off-topic]
@j7f4f2a4fds2 when you post code in the forum, you need to format it. To do so you can either select all the code and click the </> button, or type 3 backticks ``` on a separate line both before and after the code block.

I have done it for you this time.
[/off-topic]