CSS3 Animated Buttons

maya0009

• 12702
• 10
• 1

All new CSS3 Animated Buttons. The process is simple, To turn a regular link on your page into a fancy animated CSS3 button, you just need to assign the .button class and one of the supported colors.

You can find the original tutorial here. Also, this is some extract from the original article:

The first thing we need to do is to define the button class. This is the backbone of the buttons as it applies positioning, font and background styles.

First are the font-related styles, after which follows the display property. It is set to inline-block, which allows it to sit on the same line as its surrounding text (like an inline element would), but also behave like a block in regard to the paddings and margins.

As you will see in a moment, each button has four background images applied to it. Although this sounds intimidating, only one file is actually requested from the server. The first two backgrounds are the bottom left and top right part of the bubble image, which you can see in the illustration below, and the other two are pure CSS gradients.

Related: