This is a beginners tutorial to show some of the basic button styling elements now available within CSS3. I’ll go through the CSS and HTML Markup code needed and explain how it all ties together.

The example I am going to use is a ‘Buy Now’ button which could be used for an ecommerce store. The button shows that the product is available for purchase and using CSS3 elements it is animated to display the price when the user hovers over it. The button could link to a shopping cart or directly into Paypal for example.

Animated CSS3 article image

View a demo of the finished button

Download the Source Files here

Thanks to Mary Lou for inspiring this article with her animated CSS buttons tutorial. I have based my code on her example.

The Markup

Ok, so to start with we need some HTML. The HTML for the button itself is very simple. There is one class for the button itself, and then three classes for the individual elements of the ‘buy now’ text, the price and the image.

Now we need to style the button. For the purpose of this tutorial we are going to have 3 states. A normal state, a hover state and an active state for the button.

The CSS breaks down as follows:

Button and Text Styling

Next we need to style the button itself and the three elements within it. The following code includes background gradients, shadow and transition effects on the button and text. This is the styling the button will have in its normal state.

Hover Styling

The following CSS makes a minor adjustment to the already defined button styles. These styles are activated when a user hovers over the button.

Active State Styling

Finally we make a slightly darker background for the button to be shown when the button is clicked.

and that’s it! Simply edit the CSS to change the styles and transitions, and edit the Markup to change the button content. Enjoy.

NuBlue is a Lancaster based Web Design and Development company. Providing Web Development and Web Hosting services to companies across the UK.

Subscribe to RSSShare on Google+Share on LinkedInShare on StumbleUponShare on TumblrShare on FacebookTweet about this on Twitter