barebones/assets/styles/components/_buttons.scss

.btn {
    background-color: map-get($colors, 'brand');
    color: map-get($colors, 'background');
    border: 1px solid transparent;
    display: inline-block;
    padding: #{$base-spacing-unit * 0.25} $base-spacing-unit;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    touch-action: manipulation;
    cursor: pointer;
    user-select: none;
    width: auto;
    transition: all .5s;

    &::-moz-focus-inner {
        border: 0;
        padding: 0;
    }

    &:hover {
        text-decoration: none;
        background-color: map-get($colors, 'background');
        color: map-get($colors, 'brand');
        border-color: map-get($colors, 'brand');
    }

    &.is-disabled,
    &:disabled {
        pointer-events: none;
        opacity: .65;
    }
}

.btn--inverse {
    background-color: map-get($colors, 'background');
    color: map-get($colors, 'brand');
    border: 1px solid map-get($colors, 'brand');

    &:hover {
        background-color: map-get($colors, 'brand');
        color: map-get($colors, 'background');
        border-color: transparent;
    }
}

.btn--block {
    display: block;
    width: 100%;

    + .btn--block {
        margin-top: $base-spacing-unit * 0.25;
    }
}

.btn--link {
    background-color: transparent;
    color: map-get($colors, 'brand');
}