Make animated buttons with pictures and CSS

css| button

Most of the time you can see the buttons in Flash can be animated, and most of the HTML button is a single frame switch. In fact, animation is also feasible.
Let's take a look at the following preview picture

Mouse move up, mouse click, mouse move away

Here is the actual effect, personally experiencing

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 in the animated picture itself

First look at this picture, déjà vu. The principle is the same

We use the link object pseudo class HOVER and ACTIVE to simulate flash inside the pointer through and press the effect, in fact, there are some differences, the other bouncing button is The general state of link.

Understand this, then look at the animation itself, the second example has three pictures

Figure 1 from [Mouse point I]->[thank you for your patronage]

Figure 2 From [Thanks for your patronage]->[mouse dot i]

Figure 3 Text sink, simulate click effect

When the mouse moves up to play picture 2 then the animation automatically scroll to [Mouse point me]
When the mouse moves away , play picture 1 then the animation automatically scrolling to [Thank you for your patronage]
Click on the mouse when playing picture 3.

Here are some descriptions of the animations that make the fireworks button. These two pictures are the source files that the mouse passes over and moves away

Open to see, in fact, the same as ordinary animation, but pay attention to a small detail

Export the GIF animation before you remember to select [Not loop] in the frame panel. Tips in mind ...

Tips: The code is simply HTML and CSS made. So the effect is not particularly perfect, if the use of HTML with some of the behavior of JavaScript to make, you can completely simulate the Flash button four states. But also to see the drawbacks of this method, the picture is big, load slowly, The first time the mouse is moving up there will be a missing effect.

Example Packaging:Source.rar