Here we discuss how to Create a CSS3 Button, 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 Create a CSS3 Button
- 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 Code
<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 Code
.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.
