JOIN OVER 25,000HAPPY CUSTOMERS AND GET ACCESS TO OUR FULL COLLECTION OF SENSATIONAL THEMES - 23 FOR THE PRICE OF ONE!

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

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:

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:

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:

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″]

We really appreciate you for visiting PremiumCoding and reading this article! Now you might also want to check out our Themes here.

OUR NEWSLETTER

Subscribe to our newsletter to receive news, updates, freebies and new WordPress Themes releases by email. We never spam.

Enter your email address...

Premiumcoding offers premium WordPress themes for corporate and personal use. From clean and minimal, to complex and multi-functional, every one of our themes is professional, responsive and beautiful.