Picture and CSS animation buttons

Source: Internet
Author: User
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



Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.