Buttons

Default Styles

Most buttons are applied inline using CMS tools by content editors, so we have a set of classes for buttons. .button is the base class and is modified by .button--secondary and .button--apply.

Button size is relative to its parent element.

Default Button Secondary Button Apply Button 

Markup
<div class="button-examples buttons--light">
    <p>
        <a class="button" href="#">Default Button</a> 
        <a class="button button--secondary" href="#">Secondary Button</a> 
        <a class="button button--apply" href="#">Apply Button</a>
    </p>
</div>

SASS CSS
.buttons--light {
    background-color: $gray-100;
}

Overrides

If buttons are used on a different colored background, color overrides are needed. Here are a few common options.

The apply button should always be red.

Default Button Secondary Button Apply Button

Default Button Secondary Button Apply Button 

Markup
<div class="button-examples buttons--dark">
    <p>
        <a class="button" href="#">Default Button</a> 
        <a class="button button--secondary" href="#">Secondary Button</a> 
        <a class="button button--apply" href="#">Apply Button</a>
    </p>
</div>
<div class="button-examples buttons--gold">
    <p>
        <a class="button" href="#">Default Button</a> 
        <a class="button button--secondary" href="#">Secondary Button</a> 
        <a class="button button--apply" href="#">Apply Button</a>
    </p>
</div>


SASS CSS
.buttons--dark {
    background-color: $gray-600;
        
    .button--secondary {
        background-color: $gray-600;
        color: $gray-100;
    
        &:hover,
        &:focus,
        &:active {
            background-color: fade-out($gold-200, .8);
            color: $gray-100;
        }
    }
}

.buttons--gold {
    background-color: $gold-400;
    
    .button {
        background-color: $gray-600;
        color: $gray-100;
        border-color: $gray-600;
    
        &:hover,
        &:focus,
        &:active {
            background-color: fade-out($gray-600, .3);
            color: $gray-100;
            border-color: $gray-600;
        }
    }
    .button--secondary { 
        background-color: transparent;
        color: $gray-600;
        border-color: $gray-600;
    
        &:hover,
        &:focus,
        &:active {
            background-color: fade-out($gold-200, .6);
            color: $gray-600;
            border-color: $gray-600;
        }
    }
}

Positioning

By default, buttons are aligned as block-level elements. This behavior can be overridden to inline-block for special cases or media queries. The button--inline-block() mixin will set the buttons as inline. The button--block() mixin will change it back to block.

SASS CSS
.button {
    @include button--inline-block();
}
@media #{$query-small} {
    
    .button {
        @include button--block();
    }
}

For block alignment, the last-child of .button elements has its bottom margin reduced to keep vertical alignment consistent.

Custom Buttons

Custom button styles can be created with a mixin. The custom-button() mixin has a set of color variables that can be passed to it to define button style. Below are the mixin options with their default values. All are optional.

This mixin is for creating buttons that need to be positioned differently than default buttons. It is best to use the default .button class and create a new modifier class on buttons for consistent positioning. 

$color-background:              $gold-400
$color-text:                    $black
$color-border:                  $gold-400
$color-background-hover:        $gold-200
$color-text-hover:              $black
$color-border-hover:            $gold-400