sass Buttons sample

gistfile1.sass

/* ****    BUTTON TEMPLATE   *****

  <a href="#" class="button orange">
    <span class="corner_left"></span>
    <span class="corner_right">
      <span class="text">Connexion</span>
    </span>
  </a>

*/

.ie7, .ie6 {
  .button {
    position: relative;
    top: 5px;
  }
}


.button {
  @include inline-block;

  text-decoration: none;
  font-size:   16px;
  line-height: 24px;
  margin: 0 5px;

  position: relative;
  bottom: 3px;

  cursor: pointer;

  .corner_left, .corner_right, .text {
    display: block;
    float: left;
    background-color: transparent;
    background-repeat: no-repeat;
  }

  .corner_left {
    background-position: left top; }

  .corner_right  {
    background-position: right top; }

  .text {
    color: #fff; }



  &:hover {
    .corner_left {
      background-position: left bottom; }

    .corner_right  {
      background-position: right bottom; }
  }

    //************************//
    //      ORANGE BUTTON
    //************************//
    &.orange {
      $height_button: 24px;
      font-size: 15px;
      line-height: 24px;
      color: #fff;
      &:hover {
        color: #fff;
      }
      .text {
        @include text-shadow(#d06600 1px 1px 0); }

      $space_before_and_after: 10px;

      .corner_left {
        width: $space_before_and_after; }

      .corner_right {
        padding-right: $space_before_and_after; }

      .corner_right, .corner_left {
        height: $height_button;
        background-image: url(/images/site/buttons/orange.png);
      }
    }

    //************************//
    //      BIG BlUE BUTTON
    //************************//
    &.big_bleu {
      $height_button: 32px;
      font-size: 16px;
      line-height: 32px;
      color: #fff;
      &:hover {
        color: #fff;
      }
      .text {
        @include text-shadow(#3e5692 1px 1px 0); }

      $space_before_and_after: 10px;

      .corner_left {
        width: $space_before_and_after; }

      .corner_right {
        padding-right: $space_before_and_after; }

      .corner_right, .corner_left {
        height: $height_button;
        background-image: url(/images/site/buttons/big_bleu.png);
      }
    }


    //************************//
    //      FACEBOOK BUTTON
    //************************//
    &.facebook {
      $height_button: 24px;
      font-size: 15px;
      line-height: 24px;
      color: #fff;

      &:hover {
        color: #fff; }

      .text {
        @include text-shadow(#233e64 1px 1px 0); }

      $space_before_and_after: 10px;

      .corner_left {
        width: 30px;
      }
      .corner_right {
        padding-right: $space_before_and_after; }

      .corner_right, .corner_left {
        height: $height_button;
        background-image: url(/images/site/buttons/facebook.png);
      }

    }
}


button.wrapper_button {
  display: inline;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-color: transparent;
  border-width: 0;
  .text {
    line-height: 24px;
  }
}

.ie6, .ie7 {
  button.wrapper_button {
    padding: 0;
    margin: 0;
    width: 150px;
    height: 40px;
    &.right {
      .button {
        float: right;
      }
    }
  }
}