• Advertisement
Sign in to follow this  

[web] how do I make animated buttons?

This topic is 2777 days old which is more than the 365 day threshold we allow for new replies. Please post a new topic.

If you intended to correct an error in the post then please contact us.

Recommended Posts

How do I animate the buttons in my websites? Example: when the user hovers over the button I want it to sink in and glow. I have photoshop and dreamweaver but people say that I need macromedia flash to do this. True?

Share this post


Link to post
Share on other sites
Advertisement
You can use the CSS :hover pseudo-class to apply a different set of rules to an element when the mouse hovers over it. For example, if you gave your buttons a class glow-button you could change the background image on hover:

.glow-button {
background-image: url('images/button-normal.gif');
}
.glow-button:hover {
background-image: url('images/button-hover.gif');
}

Note that IE 6 only supports :hover on a elements (links).

Share this post


Link to post
Share on other sites
A variant of this is to put both the normal and hover version of the button into one image, this is essentially to pre-load the hover version to avoid the annoying flicker the first time you go over the button, you then just move the image background around to show the part that matters:

.glow-button {
background-image: url('images/glow-button.gif');
height: 30px; /* So glow-button.gif will be 60px to accommodate the normal and glow versions */
}

.glow-button:hover {
background-position: 0 -30px; /* Move it up by 30px to show the glow */
}

Share this post


Link to post
Share on other sites
Quote:
Original post by dmatter
A variant of this is to put both the normal and hover version of the button into one image, this is essentially to pre-load the hover version to avoid the annoying flicker the first time you go over the button, you then just move the image background around to show the part that matters:

*** Source Snippet Removed ***


Using javascript you can take this a bit further and make a smooth multi frame animation aswell. (By moving the image 30 pixels (or whatever height you have) every 50 ms or so.

Share this post


Link to post
Share on other sites
Sign in to follow this  

  • Advertisement