Skillfully use HTML5 to design different animations for the button background

How to use HTML5 Design button background different animation effects, in this effect, when the mouse over the button, use CSS3 animation to animate background-size and Background-positi on property to achieve a variety of background animation effects.

Here's a look at the overall:

Specific implementation:

1. CSS style

First, set a universal style for the button. Removes the button's background, sets a solid border of 2 pixels, and sets the bottom border to 4 pixels. Sets the size of the button by padding and sets the smooth animation transition for the text color of the button.

First type of button background animation:

In the first button background animation, the background of the button is made using 2 gradient layers. Performs a halftone frame animation when the mouse hovers over the button, which modifies the Background-size property of the button. It reduces the size of the background image so that all the dots are connected to one piece.

The second type of button background animation:

In the second button background animation, a linear gradient is used as the background image of the button. When the mouse over the button, by modifying the button's Background-position property, so that the background position changes constantly, forming a zebra movement effect .

The third type of button background animation:

In the third button background animation, use the dot gradient as the background image of the button. When the mouse over the button, by modifying the button's Background-position property, so that the background position changes constantly, forming a point motion effect.

The fourth kind of button background animation:

The fourth kind of button background animation uses the wave to change the background image of the button. When the mouse over the button, by modifying the button's Background-position property, so that the background position changes constantly, forming a wave dynamic motion effect.

The fifth kind of button background animation:

The fifth button background animation uses a slash to change the background image of the button. When the mouse over the button, by modifying the button's Background-position property, so that the background position changes constantly, forming a diagonal motion effect.

The sixth kind of button background animation:

The sixth button background animation uses a circular flashing gradient as the background image of the button. When the mouse over the button, by modifying the button's Background-position property, so that the background position changes constantly, forming a circular flashing effect.

This is the six button each effect and code, in addition to this CSS style can also use some standard components to make.

Skillfully use HTML5 to design different animations for the button background