ttimsmith/theboldreport.net

// -------------------------------
// BUTTONS
// -------------------------------

.button {
  @extend %sans;

  border: 0;
  border-radius: 3px;
  display: inline-block;
  font-size: .85rem;
  font-weight: 600;
  line-height: 1;
  padding: .5rem .7rem;
  text-decoration: none;
  &--primary {
    background: $brand-color;
    color: white;
    transition: background 300ms ease;
    &:hover,
    &:focus {
      background: darken($brand-color, 8%);
      border-bottom: 0;
      color: white;
    }
    &:active {
      box-shadow: inset 0 0 3px rgba(black, .1);
    }
  }
  .icon {
    margin-right: .2rem;
  }
}

.button--outline {
  border: 1px solid lighten($dark-color, 25%);
  color: lighten($dark-color, 25%);
  vertical-align: top;
  &:hover,
  &:focus {
    background-color: $jazz-color;
    border-color: $jazz-color;
    color: white;
    .icon {
      fill: white;
    }
  }
  .icon {
    fill: lighten($dark-color, 25%);
    vertical-align: text-top;
  }
}

.button--small {
  font-size: .75rem;
  padding: .5rem;
}

.no-button {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: none;
  border: 0;
}