Awesome CSS3 Buttons

November 24, 2012 // In: CSS

Whether you are Web Designer or Web application Developer, You always use buttons in your projects. Its very easy now to stylize your buttons using CSS3. You can create awesome buttons by applying little bit CSS.

In this tutorial, I’ll tell you, how you can create awesome and good looking buttons in a minute.

 Awesome Button

First of all I’ll tell you how to make Awesome button, We’ll apply some CSS3 Gradient Effects on the Buttons to stylize the buttons. Your Button will be ready in two steps. Firstly we write a markup and secondly we apply CSS on it.

The Simplest markup for button is

Now we’ll define CSS class button 

Here is the Result

 Add Icon to the Button

We can add different icons on the button, so that it looks awesome. Note one thing, We’ll use HTML Entities instead of image because it loads faster than image.  Add only one more CSS class.

The new markup for Button with icon is

we added star class along with button class

Here is the new Demo

You can use different entites to use as icon with button. Here are simple examples

You can also apply different colors like

Markup for the twitter button is

CSS

 

Give your feedback in the comments.

Change Text Selection Color
5 Best Textbox Styles using CSS3