Buttons

Solid Buttons
Outline Buttons
White Button
Large Buttons
Other Buttons

Solid Buttons

Adding the class .btn will create a standard gray button. The below mixin updates this button by adding some padding and custom colors.

// Create color variations of our `.btn`
@mixin btn-solid($color) {
  color: $white;
  background-color: $color;
  background-image: linear-gradient(rgba(255, 255, 255, 0.25), rgba(255, 255, 255, 0));
  border-color: $color;
  text-shadow: 0 -1px 0 rgba(0,0,0,0.15);

  &:hover,
  &:active {
    border-color: $color;
    background-color: $color;
    background-image: linear-gradient(rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0.05));
  }
}

.btn-purple {@include btn-solid($purple);}
.btn-blue {@include btn-solid($blue);}
.btn-orange {@include btn-solid($orange);}
.btn-themed {@include btn-solid($theme-color);}

<button class="btn btn-themed" type="button">Theme Color Button</button>
<button class="btn btn-purple" type="button">Purple Button</button>
<button class="btn btn-orange" type="button">Orange Button</button>
<button class="btn btn-blue" type="button">Blue Button</button>
<button class="btn btn-gray" type="button">Gray Button</button>
<button class="btn btn-themed" type="button" disabled>Disabled Button</button>

Outline Buttons

This button has the same styles as the outline button style from Primer, but Basecoat includes a mixin that will generate the button for you. You can create button styles of any color using this mixin.

// Create color variations of our `.btn-outline`
@mixin btn-outline-theme($color, $bg: $theme-color) {
  color: $color;
  border-color: $color;
  border-radius: .25em;

  &:hover,
  &:active {
    @if (lightness($color) > 50) {
      color: $theme-color;
    } @else {
      color: #fff;
    }
    background-color: $color;
    border-color: $color;
  }
}

.btn-outline-purple {@include btn-outline-theme($purple);}
.btn-outline-blue {@include btn-outline-theme($blue);}
.btn-outline-orange {@include btn-outline-theme($orange);}
.btn-outline-white {@include btn-outline-theme($white);}
.btn-outline-themed {@include btn-outline-theme($theme-color);}

<button class="btn btn-outline" type="button">Base Outline Button</button>
<button class="btn btn-outline-themed" type="button">Theme Color Outline Button</button>
<button class="btn btn-outline-purple" type="button">Purple Outline Button</button>
<button class="btn btn-outline-orange" type="button">Orange Outline Button</button>
<button class="btn btn-outline-blue" type="button">Blue Outline Button</button>
<button class="btn btn-outline-themed" type="button" disabled>Disabled Themed Outline Button</button>

White Button

This button style should only be used on backgrounds colors or images that are dark enough to have white text accessible on them.

<button class="btn btn-outline-white" type="button">White Button</button>

Large Buttons

If you want to make a button bigger, you can use .btn-lg.

<button class="btn btn-lg" type="button">Large Default Button</button>
<button class="btn btn-outline btn-lg" type="button">Large Outline Button</button>

Other Buttons

<button class="btn btn-link" type="button">This button has link styling</button>
<button class="btn btn-block" type="button">This button is a block</button>