image-based buttons without additional html elements, written in lesscss

buttons.less

/* usage: <a href="#" class="button orange">click me!</a> */

@sprite: url("buttons.png");

.button(@top, @height:24px) {
  display:inline-block;
  background:@sprite left (-1*@top) no-repeat;

  line-height:@height;
  padding:0 0 0 10px;

  &::after {
    color:transparent;
    content:".";
    width:10px;
    background:@sprite right (-1*@top) no-repeat;
    position:absolute;
  }
}

.button {  
  &.orange {
    .button(0);
  }

  &.red {
    .button(24px,30px);
  }
}

buttons.png