Animated buttons (non flash)

[droppenkiken]

Hi guys,

I'm just designing a website for a top high street fashion brand and after finishing my designs I've just been asked to mock up and explore some animated rollovers for my main 'BUY' call to actions.

Personally I think this is a ridiculous idea but the only way I can think of doing this is with an animated gif with a swap image the swaps to the animated version on rollover.

I have explained that it won't work on iPhones or ipads but unfortunately they don't seem to listen.

Does anyone have an idea how best I do this or does anyone know of an example of how this has been used. I've looked online and all I can find is
MEGAUPLOAD - The leading online storage and file delivery service which funnily enough doesn't work on an iPhone!!

Such a tacky idea but if I display why then maybe they'll see the light!

Cheers
Sebastian

 

[Ant]

Hey droppenkiken, first of all welcome to the forum. Head on over to the introduction sections and tell us a little about yourself

I'm more into designing than development at the moment, but I remember one buddy I once worked on a project with, placed the original button image, and then the hover over image underneath it in a saved .gif. So say home.gif would have the original and the hover over. Then on a:hover or so he did something along the lines of moving the image by pixels.

This sounds like gibberish because I don't really know how he did it, or how to do them myself. But i hope you get the point and something else to try look for?

EDIT:So you would have this as your image, say its home buttom.

When its normal it shows the top image and then hover shows the bottom. I'm sure it was done with CSS this way, if not sorry for my mistake.

Hoping this is what you meant, and not what you already had in mind when you said an animated gif, as this isn't animated.