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.

Fiddle

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

Code (markup):

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

Code (CSS):

 

It looks like you need to add some spaces. For example, Firefox should understand following syntax:

padding:2rem 3rem;

Code (CSS):

but, not

padding:2rem3rem;

Code (CSS):

 

Exactly this! You cannot blindly strip out ALL the spaces in your CSS. Generally if this is a production code and not deployment, derping everything with no spaces into a single line is an epic /FAIL/ at even trying to use CSS.

Also why I generally consider CSS minification to range from silly to outright idiotic. If it makes any sort of "real" difference in a page, you're using more CSS than you should even have.

Gets really bad with this one:
box-shadow:0020px0#E6E6E6

Also if your fourth box-shadow parameter is zero, you don't need to state it... and it would help if you included the non -webkit version of background-clip if you want to set background-clip.. and you don't need to re-state it on the pseudo-state if you state it on the non-state tag.

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;
	background-clip:text;
	color:transparent;
	text-shadow:2px 2px 5px rgba(245,245,245,1.0);
	font-weight:bolder;
}

a.soft:focus {
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;
}

Code (markup):

Should be closer to working... whoever told you that spaces could be stripped ENTIRELY was packing your fudge.

 

thanks both.

I corrected what you recommended.

It worked perfectly after adding a firefox specific rule:
@-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;
}
}

 

Thank you, worked for me, hope this is a unique solution for everyone