Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Button animation not working in Firefox?

  • This topic is empty.
Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #39262
    edharrison89
    Member

    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)

    #107513
    Paulie_D
    Moderator

    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.

    #107514
    edharrison89
    Member

    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?

    #107515
    Paulie_D
    Moderator

    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.

    #107516
    edharrison89
    Member

    Yeah true, thanks for your advice.

    #107545

    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.

    #108062
    edharrison89
    Member

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

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

Viewing 7 posts - 1 through 7 (of 7 total)
  • The forum ‘CSS’ is closed to new topics and replies.