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