Question

I am trying to make a simple menu with a nice transition effect using either jQuery or CSS3. The problem is that I want 3 buttons with 3 different hover and active states (i.e., different colours). What’s better though? jQuery or CSS3? I know IE9 doesn’t support CSS3 so should one use that right now? This menu seems easier to implement with CSS3 than jQuery, I think. See my menu here which was created using a jQuery tutorial I found here.

As you can see, the second button (red) doesn’t show up smoothly, while the third button has a smoother transition. I need this effect for all three, but each button will have a different colour.

Is this how you would do the same effect with CSS3?

.button1 {
    background-image: url('test.png');
 }

.button1:hover {
    background-image: url('test_hover.png');
    transition: background-image .15s ease-in;
    -webkit-transition: background-image .15s ease-in;

Hope I explained everything right. If you need any clarifications, let me know. Thank you.

Answer 1

The nice thing about using CSS3 transitions is that they will be ignored if the browser doesn’t recognize them. In which case, the transition will simply regress to an instant flip.

I’d recommend using a sprite image. Then instead of changing the image on hover… just change the image position.

.button1 {
    background-image: url('test_sprite.png');
    background-position: top;
}

.button1:hover {
    background-position: bottom;
    transition: background-position .15s ease-in;
    -moz-transition: background-position .15s ease-in;
    -o-transition: background-position .15s ease-in;
    -webkit-transition: background-position .15s ease-in;
    -ms-transition: background-position .15s ease-in;
}