There was a time where creating a nice looking, scalable button required heavy use of images, the sliding doors technique and even some javascript. As it stands a lot of the modern browsers support the css we would like to use to create a nice looking button. Firefox, Safari and Opera all have support for rounder corners, box shadows and text shadows. What used to take six steps and lots of extra mark-up, images and css, now only takes three steps and some simple CSS3.

One of the great perks regarding this technique is that in the event that a user doesn't have a browser that supports the CSS that we will be using, they will still see a nice beveled button – it simply won't look quite as nice.

What We are Going To Do

To create a nice button we have a few major components:

• A nice background gradient
• Rounder corners
• Some nice borders to give it a 3D effect
• A drop shadow
• A text shadow (for a nice touch)

In the end we will have a button that looks just like this, only with out using any images behind a few pixel background gradient (and when CSS gradients are supported we can even remove that!).

The HTML

 <p><a href="#">Example Button</a></p> <p><a href="#">Example Button</a></p> <p><a href="#">Example Button</a></p>

As you can see the HTML is very basic, we essentially just need an anchor tag and text. The paragraph is there just to be semantic.

The CSS

 .css3button a { background: url(background.gif) bottom repeat-x #9eabb3; padding: 5px 10px 5px 10px; text-align: center; font-weight: bold; color: #fff; text-decoration: none; border: 1px inset #aaa; -webkit-border-radius: 8px; width: auto; -moz-border-radius: 8px;
  -khtml-border-radius: 8px;  border-radius: 8px; -moz-box-shadow: 1px 1px 1px #666;  -webkit-box-shadow: 1px 1px 1px #666; 
 box-shadow: 1px 1px 1px #666; text-shadow: rgba(0,0,0, .5) 0px -1px 0px;       border-top: inset 1px #ccc; border-left: inset 1px #ccc; 
border-bottom: solid 1px solid #000; border-right: 1px solid #666; }

.css3button a:hover  { background: #999; text-shadow: rgba(0,0,0, .5) 0px 1px 0px; } 

The CSS is a bit more complicated, but still fairly simple. We are really just adding a repeating background image, adding some rounded corners, as well as box and text shadows. The borders add a bit more depth / shading and ensures that if the CSS properties are not supported that the element still retains a beveled appearance.

The background image is simple gradient to give the button some depth, in this case I used the following image:

That Simple

That is how easy it is. If you want to play around with the borders you can end up with some pretty nice effects as well.

More Examples