Button animation not working in Firefox?

[edharrison89]

I was hoping to incorporate a couple of animated nav buttons in my header that get ‘pushed in’ on hover, a bit like the animation on the nav buttons onthis site.

Now Im a bit of a rookie, so I was wondering if…

1. …it would be better to create the buttons in CSS or use an image?
2. …I would then do the animation using Javascript or CSS3?
3. … someone could point me in the right direction of were to start?

I’m not worried about older browsers that won’t support CSS3. Thanks in advance!

ps. Here is a link to my site Im working on http://edharrisondesign.com/portfolio-site/ (I have placed basic images in for now)

[Paulie_D]

I would do it with CSS and then change the properties with hover state in the CSS.

The ones on the site you linked are done with images though.

[edharrison89]

Thanks for the quick reply.

So should I change the size of pixels in the drop shadow (adding a bit of ease to the transition) while moving the whole button diagonally by the same amount of pixels?

[Paulie_D]

I would just play with it until you get the effect you are after.

You may not even need to move the button at all. If you style it with margins, borders & drop shadows etc these should all be animatable.

[edharrison89]

Yeah true, thanks for your advice.

[joshuanhibbert]

Here is an example of how I would code a link of that style: http://jsfiddle.net/joshnh/ds34H/

Feel free to take any or all of that code, but make sure to experiment with it and make it your own.

[edharrison89]

I’ve only just seen your JSfiddle, thanks so much for that Joshua, the buttons work well.

http://edharrisondesign.com/portfolio-site/

[Author]

Posts