barebones/assets/sass/components/_buttons.scss

.btn {
    background-color: $brand-colour;
    color: $base-background-colour;
    border: 1px solid transparent;
    display: inline-block;
    padding: ($base-spacing-unit / 4) $base-spacing-unit;
    text-align: center;
    width: auto;
    transition: all .5s;
    &::-moz-focus-inner {
        border: 0;
        padding: 0;
    }
    &:hover {
        text-decoration: none;
        background-color: $base-background-colour;
        color: $brand-colour;
        border: 1px solid $brand-colour;    
    }
}

.btn--inverse {
    background-color: $base-background-colour;
    color: $brand-colour;
    border: 1px solid $brand-colour;
    &:hover {
        background-color: $brand-colour;
        color: $base-background-colour;
        border: 1px solid transparent;
    }
}

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

.btn--link {
    background-color: transparent;
    color: $brand-colour;
}