Classes for outline and outline inversed button for Bootstrap 3.x LESS and SCSS

bootstrap-button-outline.less

// Button outline style
.btn-outline {
    background-color: transparent;

    &.btn-default {
        color: @btn-default-color;
        border-color: @btn-default-color;
        &:hover {
            background-color: @btn-default-color;
        }
    }

    &.btn-primary {
        color: @btn-primary-bg;
        border-color: @btn-primary-bg;
        &:hover {
            background-color: @btn-primary-bg;
            border-color: @btn-primary-border;
        }
    }

    &.btn-success {
        color: @btn-success-bg;
        border-color: @btn-success-bg;
        &:hover {
            background-color: @btn-success-bg;
            border-color: @btn-success-border;
        }
    }

    &.btn-info {
        color: @btn-info-bg;
        border-color: @btn-info-bg;
        &:hover {
            background-color: @btn-info-bg;
            border-color: @btn-info-border;
        }
    }

    &.btn-warning {
        color: @btn-warning-bg;
        border-color: @btn-warning-bg;
        &:hover {
            background-color: @btn-warning-bg;
            border-color: @btn-warning-border;
        }
    }

    &.btn-danger {
        color: @btn-danger-bg;
        border-color: @btn-danger-bg;
        &:hover {
            background-color: @btn-danger-bg;
            border-color: @btn-danger-border;
        }
    }

    &.btn-default:hover,
        &.btn-primary:hover,
        &.btn-success:hover,
        &.btn-info:hover,
        &.btn-warning:hover,
        &.btn-danger:hover {
        color: #fff;
    }
}

// Button outline style on inverse background
.btn-outline-inverse {
    background-color: transparent;
    border-color: #fff;
    color: #fff;
    &:hover {
        background-color: #fff;
    }

    &.btn-default:hover {
        color: @btn-default-color;
    }
    
    &.btn-primary:hover {
        color: @brand-primary;
    }

    &.btn-success:hover {
        color: @brand-success;
    }

    &.btn-info:hover {
        color: @brand-info;
    }

    &.btn-warning:hover {
        color: @brand-warning;
    }

    &.btn-danger:hover {
        color: @brand-danger;
    }
}

bootstrap-button-outline.sccs

// Button outline style
.btn-outline {
    background-color: transparent;

    &.btn-default {
        color: $btn-default-color;
        border-color: $btn-default-color;
        &:hover {
            background-color: $btn-default-color;
        }
    }

    &.btn-primary {
        color: $btn-primary-bg;
        border-color: $btn-primary-bg;
        &:hover {
            background-color: $btn-primary-bg;
            border-color: $btn-primary-border;
        }
    }

    &.btn-success {
        color: $btn-success-bg;
        border-color: $btn-success-bg;
        &:hover {
            background-color: $btn-success-bg;
            border-color: $btn-success-border;
        }
    }

    &.btn-info {
        color: $btn-info-bg;
        border-color: $btn-info-bg;
        &:hover {
            background-color: $btn-info-bg;
            border-color: $btn-info-border;
        }
    }

    &.btn-warning {
        color: $btn-warning-bg;
        border-color: $btn-warning-bg;
        &:hover {
            background-color: $btn-warning-bg;
            border-color: $btn-warning-border;
        }
    }

    &.btn-danger {
        color: $btn-danger-bg;
        border-color: $btn-danger-bg;
        &:hover {
            background-color: $btn-danger-bg;
            border-color: $btn-danger-border;
        }
    }

    &.btn-default:hover,
        &.btn-primary:hover,
        &.btn-success:hover,
        &.btn-info:hover,
        &.btn-warning:hover,
        &.btn-danger:hover {
        color: #fff;
    }
}

// Button outline style on inverse background
.btn-outline-inverse {
    background-color: transparent;
    border-color: #fff;
    color: #fff;
    &:hover {
        background-color: #fff;
    }
    
    &.btn-default:hover {
        color: $btn-default-color;
    }

    &.btn-primary:hover {
        color: $brand-primary;
    }

    &.btn-success:hover {
        color: $brand-success;
    }

    &.btn-info:hover {
        color: $brand-info;
    }

    &.btn-warning:hover {
        color: $brand-warning;
    }

    &.btn-danger:hover {
        color: $brand-danger;
    }
}