How to make really sexy buttons with CSS

I’ve been using the How to make sexy buttons with CSS technique for easily adding good looking buttons to a web application and found I could Jazz them up a little by using the free icons from FamFamFam Silk.

Below are the old style buttons.

And next are the new buttons.

Basically all I’m doing is adding a relevant icon against the link and pushing the text a little more to the left.

The HTML Markup

The HTML markup is similar to oscars with the addition of an image tag pointing to a famfamfam icon.

<p class="button">
  <img src="/img/buttons/add.png" />
  <a href="#"><span>Add task</span></a>
</p>

The CSS Styling

This is directly copied over from Oscar’s implementation with a couple of changes.

/* Buttons
----------------------------------------------- */

p.button img {
  position: absolute;
  margin: 4px 0 0 5px;
}

p.button {
  display: block;
  margin-bottom: 10px;
}
p.button a {
  padding: 0px;
  background: transparent url('bg_button_a.gif') no-repeat scroll top right;
  color: #444;
  display: block;
  font: bold 12px arial, sans-serif;
  height: 24px;
  padding-right: 18px; /* sliding doors padding */
  text-decoration: none;
  margin: 0px 6px 00px 0px;
}

p.button span {
  margin: 0px;
  background: transparent url('bg_button_span.gif') no-repeat;
  display: block;
  line-height: 14px;
  padding: 5px 0 5px 25px;
}

p.button a:active {
  background-position: bottom right;
  color: #000;
  outline: none; /* hide dotted outline in Firefox */
}

p.button a:active span {
  background-position: bottom left;
  padding: 6px 0 4px 25px; /* push text down 1px */
}