Animation buttons for images and CSS

Most of the time, you can see that the buttons in FLASH can be animated, while most buttons made in HTML are switched to a single frame. In fact, it is also feasible to make animations.
Let's take a look at the preview image below.
Move the mouse up, click, and move the mouse away
The following is the actual result. Try it yourself.

The code is as follows:

Copy code

. Temp1 a {display: block; height: 31px; width: 88px; background-image: url (/articleimg/2006/11/4252/06 .gif )} . Temp1 a: hover {background-image: url (/articleimg/2006/11/4252/07 .gif )} . Temp1 a: active {background-image: url (/articleimg/2006/11/4252/08 .gif )} . Temp2 a {display: block; height: 31px; width: 88px; background-image: url (/articleimg/2006/11/4252/03 .gif )} . Temp2 a: hover {background-image: url (/articleimg/2006/11/4252/04 .gif )} . Temp2 a: active {background-image: url (/articleimg/2006/11/4252/05 .gif )} A {display: block; height: 31px; width: 88px; background-image: url (Figure 1 )} A: hover {background-image: url (Figure 2 )} A: active {background-image: url (figure 3 )}

In fact, the most important thing is that the animation image itself

First, let's take a look at this image.
We use the pseudo HOVER and active link objects to simulate the pointer passing and pressing effect in FLASH. In fact, there are still some differences. In addition, the popped button is the normal state of link.
Let's take a look at the animation itself. In the second example, there are three images.
Figure 1 [click me]-> [thank you for your patronage]
Figure 2 [thank you for your patronage]-> [click me]
Figure 3 text sink to simulate Click Effect
When you move the mouse up, play the picture 2. Then the animation will automatically scroll to [click me].
Play the picture when you move the mouse away. 1 The animation will automatically scroll to [thank you for your patronage]
Play the picture when you click the mouse. 3.
The following describes how to create an animation for a button in Fireworks. The two images are source files that move the mouse over and away.
 
Open it. It's actually the same as a normal animation, but pay attention to a small detail.
Before exporting GIF animation, remember to select [do not loop] on the frame panel. Tips .....
Tips: The code is simply made of HTML and CSS. therefore, the effect is not very perfect. If HTML is used in combination with some javascript behaviors, you can completely simulate the four states of the flash button. however, we also need to see the drawbacks of this method. The picture is large and loading is slow. The first time you move the mouse up, there will be a missing effect.
Example package: source.rar