CSS Button effects not working across browsers - html

Question

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.soft {
display: inline-block;
font-family: 'Varela Round', sans-serif;
padding: 2rem 3rem;
font-size: 1.25vw;
box-shadow: -10px -10px 20px 0 #E6E6E6, 10px 10px 20px 0 #ABABAB, inset 10px 10px 20px 0 #E6E6E6, inset -10px -10px 20px 0 #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) 2px 2px 5px;
font-weight: bolder;
}
a.soft:hover {
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;
}
a.soft:active {
box-shadow: 0 0 20px 0 #E6E6E6, 0 0 20px 0 #ABABAB, inset 0 0 20px 0 #E6E6E6, inset 0 0 20px 0 #ABABAB;
color: #D8D8D8;
text-shadow: 1px 1px 2px white;
-webkit-background-clip: text;
font-weight: bolder;
}
<a class="soft">Button</a>

Answer 1

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