Background image fade

[KillZoneZ]

I want to make so when the user hover's the button, it fades away to a new background-image. I managed to make it change the background-image, but the time it takes to change itself is not what i want it to be. Even if i put 6s it will still change the background-image instanstly. Here's my code:

#SignUpButton {
	font-family:'Oxygen',sans-serif;
	color:#F7F7F7;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
	margin-top:3%;
	position:relative;
	height:40px;
	width:40%;
	background-image:url("http://s8.postimg.org/o723mxtdf/Button_Dark.png");
	margin-left:30%;
	margin-right:30%;
	border:none;
        transition:6s;
}

#SignUpButton:hover {
	background-image:url("http://s11.postimg.org/6bkzpzav5/Button_Main.png");
}

Thanks

[maxxd]

You can't animate the background-image property with straight css (see here -scroll down for 'background'). However, you can layer images over one another and fade the top one in and out on hover. Check here - good information on cross-fading images, including keyframe, timed, and delayed information.

[scootstah]

Not sure what your images are since the URL doesn't work, but if it's just a gradient or something than you can use CSS to create it.

[KillZoneZ]

Yes it is gradients, however i think i'm going with maxxd's idea, thank you very much both of you ^^

[scootstah]

Good idea, because it seems background gradients aren't supported by transition either.