Creating Great Looking Buttons Using CSS3
Buttons are used everywhere on the web today, whether it be to submit a form or draw attention to a link. The problem with good looking buttons is that they are images, which can be difficult to make, and even more difficult to add animations to (such as making the button look different when hovered over. The problem with the HTML button tag (or input tag with type of button) is that without good styling you still need to know how to do a JavaScript location function and have an ugly gray button.
Before we start this tutorial I will point out that the CSS is mainly in CSS3, so it will work on most browsers except IE8 or lower.
So first lets go through the HTML as that is only one line of code (not only that but one tag). The HTML is simply an anchor tag that we gave a class of btn_pretty. I also added an image inside my link to add a little bit more to the button.
The CSS is also pretty simple. I actually use a CSS3 Generator that I found online that works great. The CSS3 elements used are border-radius, box-shadow, and text-shadow. I will also be adding a gradient background to the button later on. I also added a hover effect to give the button a little bit of animation so that vistors to the site will know that it is a button.
A full download of the source code can be found here. It is also available in a GitHub Gist here.
Example
Order Products
