A button style base (Requires Compass)

README.md

Use

Button Colors

Add or adjust color subclasses by defining background-color.

Icons

Create a new subclass for .icon (e.g. &.phone:before/after) and add the character as the content (e.g. content: 'x'). Depending on whether the icon is inserted before or after the button text, add a trailing or leading space (e.g. 'x 'for :before or ' x' for :after). Entypo (http://www.entypo.com) is the icon font used here, but can easily be replaced with one of your choice, or scrapped altogether if you prefer to link directly to an image (NOTE: content: url('...') would be an interesting way to add this with the current :before/:after element implementation)

button.scss

@import "compass/css3";

// EXAMPLE ONLY //

body {
  font-family:            Sans-Serif;
  font-size:              0.75em;
  font-smooth:            always;
  -webkit-font-smoothing: antialiased;
  text-shadow:            1px 1px 1px rgba(0,0,0,0.004);
  text-align:             center;
  padding-top:            100px;
  white-space:            nowrap;
  background:             #fafafa;
}
.button-holder {
  display:                inline-block;
  padding:                0.5em;
  border-radius:          2px;
  background:             #fff;
  @include
    box-shadow(           inset 0 0 2px rgba(#000, 0.2));
  @include 
  background-image(       
                          linear-gradient(rgba(#000, 0),rgba(#000, 0.015))
  );
}

// END EXAMPLE //

@font-face {
  font-family: 'Entypo';
  src: url('../fonts/entypo.eot');
  src: url('../fonts/entypo.eot?#iefix') format('embedded-opentype'),
       url('../fonts/entypo.woff') format('woff'),
       url('../fonts/entypo.ttf') format('truetype'),
       url('../fonts/entypo.svg#entypo') format('svg');
  font-weight: normal;
  font-style: normal;
}

.button {

  // DESPLAY PROPERTIES //
  display:                inline-block;
  
  // DIMENSIONS //
  padding:                0.1em 0.75em 0;
  line-height:            2.25em;
  
  // BORDER //
  border-color:           rgba(#000, 0.4);
  @include                border-radius(0.1875em);
  border-style:           solid;
  border-width:           1px;
  
  // HIGHLIGHT & REFLECTION //
  @include
  box-shadow(
                          inset 0 1px 0 0 rgba(#fff, 0.20), 
                          inset 0 0 0 2px rgba(#000, 0.05),
                          inset 0 1em 0 0 rgba(#fff, 0.1)
  );
                        
  // BACKGROUND PROPERTIES //
  background-size:        100% 200%;
  background-origin:      border-box;
  
  // DEFAULT BACKGROUND COLOR //
  background-color:       #666666;
  
  // GRADIENT OVERLAY //
  @include 
  background-image(       
                          linear-gradient(rgba(#000, 0),rgba(#000, 0.2),rgba(#000, 0.4))
  );

  // TEXT //
  color:                  white;
  text-decoration:        none;
  text-shadow:            0 1px 0 rgba(#000, 0.1),
                          0 -1px 0 rgba(#000, 0.2);

  // STATE TRANSITION //
  @include                transition(background-position 150ms ease-in-out);
  
  // STATES //
  
  &:hover {
    background-position:  0 center;
  }
  
  &:active {
    @include              transition(background-position 50ms ease-in-out);
    background-position:  0 bottom;
    border-color:         rgba(#000, 0.5);
    box-shadow:           inset 0 0 0 1px rgba(#fff, 0.05),
                          inset 0 -1.5em 2px 0 rgba(#000, 0.05);

  }
  
  // COLOR SUBCLASSES //
  
  $base-color:            #0080ff;
  $color-offset:          240;
    
  &.primary {
    background-color:     adjust-hue($base-color, $color-offset * 0.0);
  }
  
  &.secondary {
    background-color:     adjust-hue($base-color, $color-offset * 0.5);
  }
  
  &.tertiary {
    background-color:     adjust-hue($base-color, $color-offset * 0.75);
  }
  
  &.white {
    background-color:     #fff;
    color:                #333;
    text-shadow:          none;
  }

  // ICON SUBCLASSES //

  &.icon {

    &:before, &:after {
      font-family:        'Entypo';
      font-size:          2.5em;
      position:           relative;
      top:                0.12em;
      line-height:        0
    }

    &.phone:before {
      content:            '🎯 ';
    }

    &.add-contact:before {
      content:            '';
    }

    &.login:after {
      content:            ' ';
    }

    &.cancel:before {
      content:            '✖ ';
    }

    &.tree:before {
      content:            '🕪 ';
    }
    
  }

}

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Simple Button</title>
    <link rel="stylesheet" type="text/css" href="stylesheets/button.css">
  </head>
  <body>
    <div class='button-holder'>
      <a class='button icon add-contact' href='#'></a>
      <a class='button primary icon login' href='#'>Login</a>
      <a class='button secondary icon cancel' href='#'>Cancel</a>
      <a class='button tertiary icon tree' href='#'>Green Button</a>
      <a class='button white icon phone' href='#'>White Button</a>
    </div>
  </body>
</html>