Ian Purton

Ian Purton’s Notes

How to make really sexy buttons with CSS

  • PublishedSeptember 3rd, 2008
  • AuthorIan Purton
  • CategoriesCSS

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.

Old Buttons

And next are the new buttons.

New Bottons

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 */
}

"How to make really sexy buttons with CSS" was published on September 3rd, 2008 and is listed in CSS.

Follow comments via the RSS Feed | Leave a comment | Trackback URL

Leave Your Comment

(required)
(required)
 

Subtraction Wordpress Theme by Ian Purton