body {

  .he-btn,
  .button,
  .btn,
  a.btn {
    padding: 6px 8px;
    color: rgba($button-color, 1);
    background: $button-bg;
    @include gradient(top, lighten($button-bg, .1), darken($button-bg, .1));
    @include border-radius(.3em);
    text-decoration: none !important;
    //margin-left: 10px;
    //margin-right: 10px;
    display: inline-block;
    border-width: 0;
  }

  .he-btn:hover,
  .button:hover,
  .btn:hover,
  a.btn:hover {
    color: rgba($button-color, .9);
  }

}

.he-btn.he-icon:before {
  float: left;
  line-height: unset;
  margin-right: .3em
}

.he-btn:hover,
.button:hover,
.btn:hover,
a.btn:hover {
  @include sharp-shadow();
  @include gradient(top, lighten($primary, .1), darken($primary, .2));

}

.strong {
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: .025em;
}

/* Sizes */
.he-btn.xs,
.he-btn.x-small,
.he-btn.extra-small {
  padding: 1px 4px;
  font-size: .8em;
  line-height: 1.3em;
}

.he-btn.small {
  padding: 2px 6px;
  font-size: .9em;
  line-height: 1.4em;
}

.he-btn.lg,
.he-btn.large {
  padding: 8px 12px;
  font-size: 1.25em;
}

.he-btn.xl,
.he-btn.xlg,
.he-btn.x-large,
.he-btn.extra-large {
  padding: 16px 20px;
  font-size: 2em;
}

/* Sizes */

.he-btn.outline {
  background-color: transparent;
  border-style: solid;
  border-width: 2px;
  padding: 4px 6px;
}

.he-btn.outline.xs,
.he-btn.outline.x-small,
.he-btn.outline.extra-small {
  padding: 0 3px;
  border-width: 1px;
}

.he-btn.outline.small {
  padding: 0 4px;
  border-width: 2px;
}

.he-btn.outline.lg,
.he-btn.outline.large {
  padding: 5px 9px;
  border-width: 3px;
}

.he-btn.outline.xl,
.he-btn.outline.xlg,
.he-btn.outline.x-large,
.he-btn.outline.extra-large {
  padding: 11px 15px;
  border-width: 5px;
}

.he-btn.sharp {
  @include border-radius(0);
}

.he-btn.round {
  @include border-radius(.25em);
}

.he-btn.very-round {
  @include border-radius(.5em);
}

.he-btn.fully-round {
  @include border-radius(2em);
  padding-left: 2em;
  padding-right: 2em;
}

body .he-btn.outline {
  background-color: transparent;
  background-image: none;
}

body .he-btn.outline:hover {
  color: #FFF;
}

/* Colors */
.he-btn.red,
.he-btn.red.outline:hover {
  @include gradient(top, #EF473A, #CB2D3E) //@include gradient(top,#f00000, #cb2d3e)
}

.he-btn.orange,
.he-btn.orange.outline:hover {
  @include gradient(top, #FF9500, #FF5E3A)
}

.he-btn.yellow,
.he-btn.yellow.outline:hover {
  @include gradient(top, #FFF200, #FFCD02)
}

.he-btn.green,
.he-btn.green.outline:hover {
  @include gradient(top, #88DB6B, #64B448)
}

.he-btn.teal,
.he-btn.teal.outline:hover {
  @include gradient(top, #52EDC7, #5AC8FB)
}

.he-btn.blue,
.he-btn.blue.outline:hover {
  @include gradient(top, #0E74FF, #1D62F0)
}

.he-btn.black,
.he-btn.black.outline:hover {
  @include gradient(top, #4A4A4A, #2B2B2B)
}

.he-btn.grey,
.he-btn.gray,
.he-btn.silver,
.he-btn.grey.outline:hover,
.he-btn.gray.outline:hover,
.he-btn.silver.outline:hover {
  @include gradient(top, #F4F4F4, #DEE1E1);
  color: #333 !important;
}

.he-btn.purple,
.he-btn.purple.outline:hover {
  @include gradient(top, #D56EFD, #842ABF)
}

.he-btn.violet,
.he-btn.violet.outline:hover {
  @include gradient(top, #8E9CFF, #7887FF)
}

.he-btn.pink,
.he-btn.pink.outline:hover {
  @include gradient(top, #FC5FA6, #FC2A19)
}

.he-btn.white,
.he-btn.white.outline:hover {
  @include gradient(top, #FFF, #F7F7F7);
  color: #333;
}

/* Outline buttons */
.he-btn.red.outline {
  color: #FF5E3A;
}

.he-btn.orange.outline {
  color: #FF9500;
}

.he-btn.yellow.outline {
  color: #FFDB4C;
}

.he-btn.green.outline {
  color: #64B448;
}

.he-btn.teal.outline {
  color: #52EDC7;
}

.he-btn.blue.outline {
  color: #0E74FF;
}

.he-btn.black.outline {
  color: #4A4A4A;
}

.he-btn.grey.outline,
.he-btn.gray.outline,
.he-btn.silver.outline {
  color: #DBDDDE;
}

.he-btn.purple.outline {
  color: #D56EFD;
}

.he-btn.pink.outline {
  color: #FC5FA6;
}

.he-btn.white.outline {
  color: #FFF !important;
}

.more-link {
  margin-top: -($vr/2);
  text-transform: uppercase;
  font-weight: bold;
  position: relative;
  font-size: .9em;
}

.more-link .he-btn {
  padding: 0 8px;
}

.more-link .icon {
  background: rgba(0, 0, 0, .1);

  text-align: center;
  margin: auto -8px 0 6px;
  padding: 0 6px;
  float: right;
  -webkit-border-top-right-radius: .3em;
  -webkit-border-bottom-right-radius: .3em;
  -moz-border-radius-topright: .3em;
  -moz-border-radius-bottomright: .3em;
  border-top-right-radius: .3em;
  border-bottom-right-radius: .3em;
}