CSS3 Tricks: Animated Buttons

We are starting a new column called CSS3 Tricks. We will try to show you some neat tricks that you can use when designing your next website. In our first post we will show you how to create some simple animated buttons with CSS3 only. We will add some Photoshop like effects (shadow, bevel and emboss) and then animate the buttons without any help of javascript. I recommend that you download the source files first and check the live demo.

LIVE DEMO

 

[download id=”150″]
 

CREATE YOUR BUTTONS

First we have to design our buttons. We will make some round borders and add some shadow effects. Create a document called index.html and insert the following code that will add the classes needed for the buttons:

We can now add the CSS3 code that will create a nice design for our button. Create a file called style.css and add the following code:

First part of the settings simply defines the size of the button and some styling of the fonts. Text-shadow defines the shadow around the text. You can define x and y coordinates, blur effect and the color of the shadow. Box-shadow defines the shadow around the button itself. Note that we used two shadows. First one is the white inside line in the upper part of the button and the second one is the black outside line in the lower part of the button. Border-radius defines how round the corners of the button are.

Animation is defined in the last four lines (transition). We tell the css to use the animation on all parts of the css and that length of the transition is 0.2s. Now add the following class to style.css to define the properties of the text on the button:

As you can see we applied the transitions to text also. We will use them to animate the text color from white to light red. Your button should now look like this:

ANIMATE THEM WITH CSS3

All we have to do now is to add some animation effects on mouse hover. Add the following classes to the code.

In .animatedButton:hover we define a background color and you can see how the change between colors is not instant but is done with a smooth animated effect. We also redefined our shadow effect so the button now looks like it was pushed inside. The second class changes the color and shadow of the text. As you can see that is also animated.

The third button in our live demo is implemented in the same way. The only difference is a thick lower border. We just change the thickness of the border from 1px to 5px:

The CSS of the second button is not much different either. We just add the desired height in our .animatedButton:hover class:

We ofcourse have to add a class that will take care of the hidden text:

Code in the index.html file looks like this:

CONCLUSION

As you can see we can design some decent looking buttons with smooth animations with just the use of the CSS3. Please note that these animations are only supported in webkit browsers (Chrome, Opera, latest versions of FF). In our future tips&tricks posts I will show you how to make gradients, apply animations to images and much more so stay tuned!
 
[download id=”150″]