open-nomad/website/source/assets/stylesheets/_buttons.scss

//
// Button Styles
// --------------------------------------------------

.h-btn{
  display: inline-block;
  background-color: transparent;
  color: $black;
  @include transition(color .3s ease-in-out);
  //@include btn-shadow();
  font-family: $font-family-blanc-reg;
  text-transform: uppercase;
  border-radius: 3px;

  &.has-caret{
    span.h-caret{
      display: inline-block;
      width: 8px;
      height: 12px;
      margin-left: 10px;
      @include transition(all 300ms ease-in);
    }
  }

  &.lrg{
    font-size: $font-size-reg;
    padding: 10px 24px;
  }

  &.sml{
    padding: 8px 14px;
    font-size: $font-size-reg - 2;
    line-height: 14px;

    &.has-caret{
      span.h-caret{
        background-size: 6px 9px !important;
        margin-bottom: -2px;
        margin-right: -3px;
      }
    }
  }

  &.light{
    color: $green-light;

    &.has-border{
      border: 2px solid $green-light;
    }

    &.has-caret{
      span.h-caret{
        background: image-url('caret-light.png') 0 0 no-repeat;
        @include img-retina("caret-light.png", "caret-light@2x.png", 8px, 12px);
      }
    }
  }

  &.green{
    color: $green;

    &.has-border{
      border: 2px solid $green;
    }

    span.h-caret{
      background: image-url('caret-green.png') 0 0 no-repeat;
      @include img-retina("caret-green.png", "caret-green@2x.png", 8px, 12px);
    }

    &.fill{
      background-color: $green;
      color: $white;

      span.h-caret{
        background: image-url('caret-white.png') 0 0 no-repeat;
        @include img-retina("caret-white.png", "caret-white@2x.png", 8px, 12px);
      }
    }
  }

  &.gray{
    color: $blue-light;

    &.border{
      border: 2px solid $blue-light;
    }

    &.fill{
      background-color: $blue-light;
      color: $white;

      span.h-caret{
        background: image-url('caret-white.png') 0 0 no-repeat;
        @include img-retina("caret-white.png", "caret-white@2x.png", 8px, 12px);
      }
    }
  }

  &.dark{
    color: $green-dark;

    &.border{
      border: 2px solid $green-dark;
    }
  }

  &:hover{
    text-decoration: none;
    @include transition(color 200ms ease-in);

    &.has-caret{
      span.h-caret{
        @include translate(4px, 0);
        @include transition(all 200ms ease-in);
      }
    }
  }
}