Create a CSS3 Button That Degrades Nicely

add to

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.

Examples

Example Button

Example Button

Example Button

Example Button

Have some feedback? Leave a comment

What Now?

Digg this
Save to Del.ico.us
Stumble This
Subscribe
Leave a Comment

Further Reading

• Use the Link Description in Wordpress 3.0 Menus
• The Business Case for Microformats
• Essential Plugins for Wordpress 3.0
• 5 Rocking Google Analytics Plugins for Wordpress
• Old Design is New – 33 “Hip” Circles in Web Design

More?

Posted on 08. 10. 2009
Filed as CSS, Design, General
By 3pointross