button with one sprite and no extra mark-up

a.button.css

/* the only mark-up is <a href="#" class="button">Click me!</a> */

a.button {
  float: left; display: block; /* makes the width fit around the text */
  padding: 0 0 0 1em; /* padding on the LEFT only */
  line-height: 32px; /* the full height of the sprite */
  background: url(/images/sprite.png) no-repeat left 0; /* position here assumes the edge is the true edge */
}
a.button:after {
  display: inline-block; /* make it full height, yet inline */
  content: '\2003'; /* one m space, i.e. takes up 1em width on the RIGHT */
  background: url(/images/sprite.png) no-repeat right 0; /* position here assumes the edge is the true edge */
}