Skeleton CSS-style Button Mixin via Sass & Compass (http://www.getskeleton.com/#buttons)

gistfile1.txt

@mixin skeleton-button(
  $old-browser-background: #eee,
  $up-background:linear-gradient(rgba(255,255,255,.2),rgba(0,0,0,.25)),
  $hover-background:linear-gradient(rgba(255,255,255,.3),rgba(0,0,0,.3)),
  $active-background:linear-gradient(rgba(0,0,0,.3) 0%,rgba(255,255,255,.3)),
  $up-color:#444,
  $hover-color:#222,
  $text-shadow: rgba(255,255,255,.75) 0 1px,
  $font-size: 11px,
  $font-weight: bold, 
  $border-width: 1px,
  $border-color: #aaa,
  $padding: 4px 12px,
  $border-radius: 3px
  ) {        
  // DRY stuff
  $lightened-border-color: lighten($border-color,13%);
  $darkened-border-color: darken($border-color,13%);
  // The sass
  background: $old-browser-background;
	@include background($up-background);
  border: $border-width solid $border-color;
  border-top-color: $lightened-border-color;
  border-left-color: $lightened-border-color;
  padding: $padding;
  @include border-radius($border-radius);
  color: $up-color;
  display: inline-block;
  font-size: $font-size;
  font-weight: $font-weight;
  text-decoration: none;
  @include text-shadow($text-shadow);
  cursor: pointer;
  &:hover {
    color: $hover-background;
		background: $old-browser-background;
		@include background($hover-background);
	  border-color: $darkened-border-color;
	  border-top-color: $lightened-border-color;
	  border-left-color:  $lightened-border-color;
  }    
  &:active {
    background: $old-browser-background;
    @include background($active-background);
    border-color: $darkened-border-color;
    border-bottom-color: $lightened-border-color;
    border-right-color: $lightened-border-color;   
  }
}

http://www.getskeleton.com/#buttons is a nice button