A practical use of this technique is to imagine a high score table with lots of rows each detailing a person’s high score.  You want to highlight the top three to indicate that these people are the ones to be commended and enlarge the top scorer to emphasise their achievement.  You would use this css:

table#highscores tr td {
    background-color: #666; /* default values */
    height: 20px;
}

table#highscores tr:first-child td {
    height: 40px; /* increase the row height of the top scorer */
}

table#highscores tr:nth-child(-n+3) td {
    background-color: #889; /* emphasise the top three */
}

Unforunately and unsurprisingly, this doesn't work in the most popular* browser in the world, Internet Explorer 8 and below.  For those, you'll have to use jQuery and its implementation of nth-child.  Like what was mentioned in the article on css-tricks though, this technique shouldn't really be used for fundamental website design where the layout or usability would be effected by it not being implemented.  Allowing the website to degrade gracefully for browsers with no implementation is key.

* By most popular, I really mean most widely-used.  I doubt that a large proportion of the internet population are using IE8 because they actually prefer IE8 to other browsers or they wouldn't switch if they had the opportunity, such as business users whose systems are locked down

There are a number of ways to emphasise the primary action. One of the easiest and yet still effective methods is to colour the button brightly to draw attention. Similarly you could reduce the saturation of the cancel button. The human eye is drawn to areas of colour which stand out from the page. Also culturally the colour green is associated with a positive action and so if the user is in a hurry or just speedily going through the form, when they see the green button they will know it’s the button that submits the information. Chances are that they won’t actually read the text of the button!

Notice how the send button is all bright and cheery in the facebook-blue colour whereas the cancel button is grey and boring.  Other methods are also just as effective such as using a text link for the cancel action instead of a button.  This is the one I much prefer as it informs the user that by pressing the link, it’s not going to post anything they’ve typed in on the form.  Perhaps less tech-savvy users might think the cancel button would perform some function if they typed in their order details and requested to ‘Cancel’ the order.  A link would completely resolve any issues as a normal web user knows that a link just redirects to a different page (in most cases).

Below we see a text link being used to give the user the opportunity to cancel the submission and return to where they came from.

Also it might be worth noting that rarely is the ‘reset’ button used on forms now.  I don’t know why it ever caught on in the first place anyway… Who wants to fill out an entire form and then scroll to the bottom and press reset?  It provides functionality that I’m sure was never used and when it was used it was never intended(!)

The background colour I’m using is #EFF8F8

Here I have a pseudo-button and actually it’s just a text link within a <p>. Here’s the HTML and css:

<p class="actionbutton"><a href="/BuyingAndSelling/BuyHoliday">Buy Holiday</a></p>

p.actionbutton
{
margin:0 auto 1em auto; /*center the button on the page*/
text-align:center;
width:124px;
height:44px;
}

p.actionbutton a
{
line-height:44px; /* same height as actionbutton element */
font-size:1.2em;
display:block; /* makes the whole area clickable rather than just the text */
text-decoration:none;
color:Black;
background-image: url('smartbutton.gif');
}

/*rollover*/
p.actionbutton a:hover
{
color:DarkOrange;
background-image: url('smartbutton-down.gif');
}

Here are the source images for you to play around with

Normal button state

On mouse rollover