Question

I am trying to code a button where, on hovering, will produce an ease-in-out effect. I used the following code:

#quotebutton {
padding:20px;
margin-top:-55px;
/* fallback/image non-cover color */
background-color: #000;
/* Safari 4+, Chrome 1-9 */
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#000), to(#333));
/* Safari 5.1+, Mobile Safari, Chrome 10+ */
background-image: -webkit-linear-gradient(top, #000, #333); 
/* Firefox 3.6+ */
background-image: -moz-linear-gradient(top, #000, #333);
/* IE 10+ */
background-image: -ms-linear-gradient(top, #000, #333);
/* Opera 11.10+ */
background-image: -o-linear-gradient(top, #000, #333);
font-size:18px;
color:#fff;
float:right;
transition: background 300ms ease-in-out;
-webkit-transition: background 300ms ease-in-out;
-moz-transition: background 300ms ease-in-out;
}

#quotebutton:hover {
/* fallback image non-cover color */
   background-color: #000;
   /* Safari 4+, Chrome 1-9 */
   background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#333), to(#000));
   /* Safari 5.1+, Mobile Safari, Chrome 10+ */
   background-image: -webkit-linear-gradient(top, #333, #000); 
   /* Firefox 3.6+ */
   background-image: -moz-linear-gradient(top, #333, #000);
   /* IE 10+ */
   background-image: -ms-linear-gradient(top, #333, #000);
   /* Opera 11.10+ */
   background-image: -o-linear-gradient(top, #333, #000);
}
#quotebutton a {
    text-decoration:none;
    color:#fff;
}

The HTML is as below:

<div id="quotebutton">
<a href="">Download Now</a>
</div>

But the button is not showing the effect on hovering. What might be the problem?

Answer 1

Unfortunately, the short answer is that you can’t animate background gradients with CSS3 transitions. There are a few ways that you can accomplish the same goal using alternative techniques:

1. Use jQuery to animate a transition between two different background images on hover. You can accomplish this most easily by stacking three elements on top of each other using absolute positioning, where the bottom two are the background images and the top contains the content, which in this case is your button text. On hover, fade out the top background image to reveal the bottom one smoothly. See this tutorial for making a background animation on hover with jQuery.

2. Use a semitransparent gradient background in conjunction with a webkit transition to create a partial animation. CSS3 transitions can easily animate the background-color CSS attribute, which is only visible through nonexistent or transparent background images or gradients. See this example for an idea of how you might implement this.

Of the two options, (1) is more flexible but more work and requires a companion script, while (2) is less flexible and less cross-browser compatible.