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

Can you spot the difference between these two selectors?

#header.callout {  }

#header .callout { }

They look nearly identical, but the top one has no space between “#header” and “.callout” while the bottom one does. This small difference makes a huge difference in what it does. To some of you, that top selector may seem like a mistake, but it’s actually a quite useful selector. Let’s see the difference, what that top selector means, and exploring more of that style selector.

Here is the “plain English” of “#header .callout”:

Select all elements with the class name callout that are children of the element with an ID of header.

Here is the “plain English” of “#header.callout”:

Select the element which has an ID of header and also a class name of callout.

Maybe this graphic will make that more clear:

Combinations of Classes and IDs

The big point here is that you can target elements that have combinations of classes and IDs by stringing those selectors together without spaces.

ID and Class Selector

As we covered above, you can target elements by a combination of ID and class.

<h1 id="one" class="two">This Should Be Red</h1>

 #one.two { color: red; }

Double Class Selector

Target an element that has all of multiple classes. Shown below with two classes, but not limited to two.

<h1 class="three four">Double Class</h1>

.three.four { color: red; }

Multiples

We aren’t limited to only two here, we can combine as many classes and IDs into a single selector as we want.

.snippet#header.code.red { color: red; }

Although bear in mind that’s getting a little ridiculous =)

Example

So how useful is all this really? Especially with ID’s, they are supposed to be unique anyway, so why would you need to combine it with a class? I admit the use cases for the ID versions are slimmer, but there are certainly uses. One of those is overriding styles easily.

#header { color: red; } #header.override { color: black; } 

The second targets the same element, but overrides the color, instead of having to use:

.override { color: black !important }

or perhaps prefacing the selector with something even more specific.

More useful is multiple classes and using them in the “object oriented” css style that is all the rage lately. Let’s say you had a bunch of divs on a page, and you used multiple various descriptive class names on them:

<div class="red border box"></div> <div class="blue border box"></div> <div class="green border box"></div> <div class="red box"></div> <div class="blue box"></div> <div class="green box"></div> <div class="border box"></div>

They all share the class “box”, which perhaps sets a width or a background texture, something that all of them have in common. Then some of them have color names as classes, this would be for controlling the colors used inside the box. Perhaps green means the box has a greenish background and light green text. A few of them have a class name of “border”, presumably these would have a border on them while the rest would not.

So let’s set something up:

.box { width: 100px; float: left; margin: 0 10px 10px 0; } .red { color: red; background: pink; } .blue { color: blue; background: light-blue; } .green { color: green; background: light-green; } .border { border: 5px solid black; }

Cool, we have a good toolbox going here, where we can create new boxes and we have a variety of options, we can pick a color and if it has a border or not just by applying some fairly semantic classes. Having this class name toolbox also allows us to target unique combinations of these classes. For example, maybe that black border isn’t working on the red boxes, let’s fix that:

.red.border { border-color: #900; }

Border color on red box changed because it had both the red class and border class

Based on this demo page.

Specificity

Also important to note here is that the specificity values of selectors like this will carry the same weight as if they were separate. This is what gives these the overriding power like the example above.

Browser Compatibility

All good current browsers support this as well as IE back to version 7. IE 6 is rather weird. It selects based on the first selector in the list. So “.red.border” will select based on just “.red”, which kinda ruins things. But if you are supporting IE 6, you are used to this kind of tomfoolery anyway and can just fix it with conditional styles.

There is a CSS selector, really a pseduo-selector, called nth-child. Here is an example of using it:

ul li:nth-child(3n+3) { color: #ccc; }

What the above CSS does, is select every third list item inside unordered lists. That is, the 3rd, 6th, 9th, 12th, etc. But how does that work? And what other kinds of things can you do with nth-child? Let’s take a look.

It boils down to what is in between those parentheses. nth-child accepts two keywords in that spot: even and odd. Those should be pretty obvious. “Even” selects even numbered elements, like the 2nd, 4th, 6th, etc. “Odd” selects odd numbered elements, like 1st, 3rd, 5th, etc.

As seen in the first example, nth-child also accepts equations in between those parentheses. The simplest possible equation? Just a number. If you put simply a number in the parentheses, it will match only that number element. For example, here is how to select only the 5th element:

ul li:nth-child(5) { color: #ccc; }

Let’s get back to the “3n+3″ from the original example though. How does that work? Why does it select every third element? The trick is understanding the “n” and algebraic equation that represents. Think of “n” as starting at zero and then a set of all positive integers. Then complete the equation. So the 3n is “3xn”, and the whole equation together is “(3xn)+3″. Now substituting in the zero and positive integers, we get:

(3 x 0) + 3 = 3 = 3rd Element
(3 x 1) + 3 = 6 = 6th Element
(3 x 2) + 3 = 9 = 9th Element
etc.

How about the :nth-child(2n+1)?

(2 x 0) + 1 = 1 = 1st Element
(2 x 1) + 1 = 3 = 3rd Element
(2 x 2) + 1 = 5 = 5th Element
etc.

Hey wait! That’s the same as “odd”, so probably don’t need to use that one very often. But wait now. Haven’t we exposed our original example as being overly complicated? What if instead of “3n+3″, we used “3n+0″, or even simpler “3n”.

(3 x 0) = 0 = no match
(3 x 1) = 3 = 3rd Element
(3 x 2) = 6 = 6th Element
(3 x 3) = 9 = 9th Element
etc.

So as you can see, the matches are exactly the same, no need for the “+3″. We can use negative n values, as well as use subtraction in the equations. For example, 4n-1:

(4 x 0) – 1 = -1 = no match
(4 x 1) – 1 = 3 = 3rd Element
(4 x 2) – 1 = 7 = 7th Element
etc.

Using “-n” values seems a little weird, because if the end result is negative there is no match, so you’ll need to add to the equation to get it back positive again. As it turns out, this is a rather clever technique. You can use it to select the “first n elements” with “-n+3″:

-0 + 3 = 3 = 3rd Element
-1 + 3 = 2 = 2nd Element
-2 + 3 = 1 = 1st Element
-3 + 3 = 0 = no match
etc.

Sitepoint has a nice reference guide, which includes this handy-dandy table which I’ll shameless republish here:

Browser Compatibility

nth-child is one of those rather unfortunate CSS attributes that is caught between nearly full cross-browser compatibility, except for completely zero support in IE, even IE 8. So when it comes to it’s use, if the end result is “progressive enhancement” in some fashion (e.g. applying a cool color palette to table rows, for example), then by all means, go for it. But you probably shouldn’t use it if you are doing something more important, like relying on it for site structure. For example, removing the right margin from every third box in a three by three grid of boxes, so they will fit properly.

One saving grace here is that if you are using jQuery, which supports all CSS selector including :nth-child, the selector will work, even in Internet Explorer.

Still not getting it?

I’m not a big fan of the phrase “I’m a visual learner”. Of course you are, everybody is. Visual aids are enormously helpful in situations just like this. To help, I put together a little nth-child tester page. There, you can type in equations and see the results of what it selects below.