CSS3 Tricks: Animated Buttons

Tutorials No Comments

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 CSS3 Tricks: Animated Buttons source (3528)
 

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:


.animatedButton{
font-family: Arial, sans-serif;
text-decoration: none !important;
background-color:#a30e12;
padding-left: 40px;
padding-right: 40px;
height: 38px;
line-height: 38px !important;
display: inline-block;
border: 1px solid #450003;

text-shadow:0px 1px 1px #000;
-webkit-box-shadow: inset 0px 1px 1px #fff, 0 1px 0px 0px #000;
-moz-box-shadow: inset 0px 1px 1px #fff, 0 1px 0px 0px #000;
box-shadow: inset 0px 1px 1px #fff, 0 1px 0px 0px #000;

-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;

-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
}


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:


.animatedButtonText{
font-family: Arial, sans-serif;
line-height: 38px !important;
font-size: 18px;
color: #fff;

-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
transition: all 0.2s linear;
}


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:

CSS3 tricks: Animated button

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.


.animatedButton:hover{
background-color:#880408;
-webkit-box-shadow: inset 0px 1px 1px #000, 0 1px 0px 0px #fff;
-moz-box-shadow: inset 0px 1px 1px #000, 0 1px 0px 0px #fff;
box-shadow: inset 0px 1px 1px #000, 0 1px 0px 0px #fff;
}


.animatedButton:hover .animatedButtonText{
text-shadow:0px -1px 1px #000;
color:#c4282c;
}

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:


-webkit-box-shadow: inset 0px 1px 1px #fff, 0 5px 0px 0px #450003;
-moz-box-shadow: inset 0px 1px 1px #fff, 0 5px 0px 0px #450003;
box-shadow: inset 0px 1px 1px #fff, 0 5px 0px 0px #450003;

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

.animatedButton3:hover{
background-color:#880408;
height:75px;
-webkit-box-shadow: inset 0px 1px 1px #000, 0 0px 0px 0px #000;
-moz-box-shadow: inset 0px 1px 1px #000, 0 0px 0px 0px #000;
box-shadow: inset 0px 1px 1px #000, 0 0px 0px 0px #000;
}

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

.animatedButtonExtraText3{
font-family: Arial, sans-serif;
font-size:12px;
color:#fff;
overflow: hidden;
}

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 CSS3 Tricks: Animated Buttons source (3528)

We really appreciate you for visiting PremiumCoding and reading this article! Now you might also want to check out our Themes here.
Written by PremiumCoding
We develop beautiful Wordpress themes with minimal and clean design.