CSS Button effects not working across browsers

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.


<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;}

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.


Validate and fix the errors and try again.

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

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;
1 Like

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 :;

@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.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.