buttons.css

input[type="submit"],
input[type="button"],
input[type="reset"],
button.qui-button,
button,
a.qui-button,
.btn {
    display: inline-block;
    font-weight: 400;
    text-align: center;
    vertical-align: middle;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    border: 1px solid transparent;
    padding: .375rem .75rem;
    font-size: 1rem;
    line-height: 1.5;
    border-radius: .25rem;
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out, opacity .15s ease-in-out;
    cursor: pointer;
    text-decoration: none;
    font-family: 'Maven Pro', Verdana, sans-serif;
    -webkit-box-shadow: none; /* qui-button reset */
    -moz-box-shadow: none; /* qui-button reset */
    box-shadow: none; /* qui-button reset */
    float: none; /* qui-button reset */
}

button > .fa,
.btn > .fa {
    margin-right: .75rem;
}

button.loading > .fa,
.btn.loading > .fa {
    margin-right: 0;
}

/*****************************/
/* button primary & standard */
/*****************************/
input[type="submit"],
input[type="submit"]:disabled,
input[type="submit"][disabled],
input[type="button"],
input[type="button"]:disabled,
input[type="button"][disabled],
input[type="reset"],
input[type="reset"]:disabled,
input[type="reset"][disabled],
button.qui-button,
button.qui-button:disabled,
button.qui-button[disabled],
button,
button:disabled,
button[disabled],
a.qui-button,
.btn-primary {
    background-color: #3986dd;
    border-color: #3986dd;
    color: #fff;
}

input[type="submit"]:hover,
input[type="submit"]:active,
input[type="button"]:hover,
input[type="button"]:active,
input[type="reset"]:hover,
input[type="reset"]:active,
button.qui-button:hover,
button.qui-button:active,
button.qui-button.btn-primary:hover,
button.qui-button.btn-primary:active,
button.qui-button[disabled]:hover,
button.qui-button[disabled]:active,
button:hover,
button:active,
.btn-primary:hover,
.btn-primary:active {
    background: #2976cd;
    color: #fff;
    outline: none;
}

/* outline */
input[type="submit"].btn-outline,
input[type="button"].btn-outline,
input[type="reset"].btn-outline,
button.qui-button.btn-outline,
button.btn-outline,
.btn-primary.btn-outline,
input[type="submit"].btn-outline:disabled:hover, /* outline disabled */
input[type="submit"].btn-outline:disabled:active,
input[type="button"].btn-outline:disabled:hover,
input[type="button"].btn-outline:disabled:active,
input[type="reset"].btn-outline:disabled:hover,
input[type="reset"].btn-outline:disabled:active,
button.qui-button.btn-primary.btn-outline:disabled:hover,
button.qui-button.btn-primary.btn-outline:disabled:active,
button:disabled.btn-outline:hover,
button:disabled.btn-outline:active,
.btn-primary.btn-disabled.btn-outline:hover,
.btn-primary.btn-disabled.btn-outline:active {
    color: #3986dd;
}

/***************/
/* button link */
/***************/
input[type="submit"].btn-link,
input[type="button"].btn-link,
input[type="reset"].btn-link,
button.qui-button.btn-link,
button.btn-link,
.btn-link {
    background: none;
    border: none;
    color: #3986dd;
}

input[type="submit"].btn-link:hover,
input[type="submit"].btn-link:active,
input[type="button"].btn-link:hover,
input[type="button"].btn-link:active,
input[type="reset"].btn-link:hover,
input[type="reset"].btn-link:active,
button.qui-button.btn-link:hover,
button.qui-button.btn-link:active,
.btn-link:hover,
.btn-link:active {
    text-decoration: underline;
}

/********************/
/* button link dark */
/********************/
input[type="submit"].btn-link-dark,
input[type="button"].btn-link-dark,
input[type="reset"].btn-link-dark,
button.qui-button.btn-link-dark,
button.btn-link-dark,
.btn-link-dark {
    background: none;
    border: none;
    color: inherit;
}

input[type="submit"].btn-link-dark:hover,
input[type="submit"].btn-link-dark:active,
input[type="button"].btn-link-dark:hover,
input[type="button"].btn-link-dark:active,
input[type="reset"].btn-link-dark:hover,
input[type="reset"].btn-link-dark:active,
button.qui-button.btn-link-dark:hover,
button.qui-button.btn-link-dark:active,
.btn-link-dark:hover,
.btn-link-dark:active {
    color: #3986dd;
}

/********************/
/* button secondary */
/********************/
input[type="submit"].btn-secondary,
input[type="button"].btn-secondary,
input[type="reset"].btn-secondary,
button.qui-button.btn-secondary,
button.btn-secondary,
.btn-secondary {
    background: #6c757d;
    border-color: #6c757d;
    color: #fff;
}

input[type="submit"].btn-secondary:hover,
input[type="submit"].btn-secondary:active,
input[type="button"].btn-secondary:hover,
input[type="button"].btn-secondary:active,
input[type="reset"].btn-secondary:hover,
input[type="reset"].btn-secondary:active,
button.qui-button.btn-secondary:hover,
button.qui-button.btn-secondary:active,
.btn-secondary:hover,
.btn-secondary:active {
    background: #5c656d;
    color: #fff;
    outline: none;
}

/* outline */
input[type="submit"].btn-secondary.btn-outline,
input[type="button"].btn-secondary.btn-outline,
input[type="reset"].btn-secondary.btn-outline,
button.btn-secondary.qui-button.btn-outline,
button.btn-secondary.btn-outline,
.btn-secondary.btn-outline,
input[type="submit"].btn-secondary.btn-outline:disabled:hover, /* outline disabled */
input[type="submit"].btn-secondary.btn-outline:disabled:active,
input[type="button"].btn-secondary.btn-outline:disabled:hover,
input[type="button"].btn-secondary.btn-outline:disabled:active,
input[type="reset"].btn-secondary.btn-outline:disabled:hover,
input[type="reset"].btn-secondary.btn-outline:disabled:active,
button.qui-button.btn-secondary.btn-outline:disabled:hover,
button.qui-button.btn-secondary.btn-outline:disabled:active,
button.btn-secondary.btn-outline:disabled:hover,
button.btn-secondary.btn-outline:disabled:active,
.btn-secondary.btn-outline.btn-disabled:hover,
.btn-secondary.btn-outline.btn-disabled:active {
    color: #6c757d;
}

/******************/
/* button success */
/******************/
input[type="submit"].btn-success,
input[type="button"].btn-success,
input[type="reset"].btn-success,
button.qui-button.btn-success,
button.btn-success,
.btn-success {
    background: #28a745;
    border-color: #28a745;
    color: #fff;
}

input[type="submit"].btn-success:hover,
input[type="submit"].btn-success:active,
input[type="button"].btn-success:hover,
input[type="button"].btn-success:active,
input[type="reset"].btn-success:hover,
input[type="reset"].btn-success:active,
button.qui-button.btn-success:hover,
button.qui-button.btn-success:active,
.btn-success:hover,
.btn-success:active {
    background: #189735;
    color: #fff;
    outline: none;
}

/* outline */
input[type="submit"].btn-success.btn-outline,
input[type="button"].btn-success.btn-outline,
input[type="reset"].btn-success.btn-outline,
button.btn-success.qui-button.btn-outline,
button.btn-success.btn-outline,
.btn-success.btn-outline,
input[type="submit"].btn-success.btn-outline:disabled:hover, /* outline disabled */
input[type="submit"].btn-success.btn-outline:disabled:active,
input[type="button"].btn-success.btn-outline:disabled:hover,
input[type="button"].btn-success.btn-outline:disabled:active,
input[type="reset"].btn-success.btn-outline:disabled:hover,
input[type="reset"].btn-success.btn-outline:disabled:active,
button.qui-button.btn-success.btn-outline:disabled:hover,
button.qui-button.btn-success.btn-outline:disabled:active,
button.btn-success.btn-outline:disabled:hover,
button.btn-success.btn-outline:disabled:active,
.btn-success.btn-outline.btn-disabled:hover,
.btn-success.btn-outline.btn-disabled:active {
    color: #28a745;
}

/*****************/
/* button danger */
/*****************/
input[type="submit"].btn-danger,
input[type="button"].btn-danger,
input[type="reset"].btn-danger,
button.qui-button.btn-danger,
button.btn-danger,
.btn-danger {
    background: #dc4139;
    border-color: #dc4139;
    color: #fff;
}

input[type="submit"].btn-danger:hover,
input[type="submit"].btn-danger:active,
input[type="button"].btn-danger:hover,
input[type="button"].btn-danger:active,
input[type="reset"].btn-danger:hover,
input[type="reset"].btn-danger:active,
button.qui-button.btn-danger:hover,
button.qui-button.btn-danger:active,
.btn-danger:hover,
.btn-danger:active {
    background: #cc3129;
    color: #fff;
    outline: none;
}

/* outline */
input[type="submit"].btn-danger.btn-outline,
input[type="button"].btn-danger.btn-outline,
input[type="reset"].btn-danger.btn-outline,
button.btn-danger.qui-button.btn-outline,
button.btn-danger.btn-outline,
.btn-danger.btn-outline,
input[type="submit"].btn-danger.btn-outline:disabled:hover, /* outline disabled */
input[type="submit"].btn-danger.btn-outline:disabled:active,
input[type="button"].btn-danger.btn-outline:disabled:hover,
input[type="button"].btn-danger.btn-outline:disabled:active,
input[type="reset"].btn-danger.btn-outline:disabled:hover,
input[type="reset"].btn-danger.btn-outline:disabled:active,
button.qui-button.btn-danger.btn-outline:disabled:hover,
button.qui-button.btn-danger.btn-outline:disabled:active,
button.btn-danger.btn-outline:disabled:hover,
button.btn-danger.btn-outline:disabled:active,
.btn-danger.btn-outline.btn-disabled:hover,
.btn-danger.btn-outline.btn-disabled:active {
    color: #dc4139;
}

/******************/
/* button warning */
/******************/
input[type="submit"].btn-warning,
input[type="button"].btn-warning,
input[type="reset"].btn-warning,
button.qui-button.btn-warning,
button.btn-warning,
.btn-warning {
    background: #ffd147;
    border-color: #ffd147;
    color: #333;
}

input[type="submit"].btn-warning:hover,
input[type="submit"].btn-warning:active,
input[type="button"].btn-warning:hover,
input[type="button"].btn-warning:active,
input[type="reset"].btn-warning:hover,
input[type="reset"].btn-warning:active,
button.qui-button.btn-warning:hover,
button.qui-button.btn-warning:active,
.btn-warning:hover,
.btn-warning:active {
    background: #efc137;
    color: #393f46;
    outline: none;
}

/* outline */
input[type="submit"].btn-warning.btn-outline,
input[type="button"].btn-warning.btn-outline,
input[type="reset"].btn-warning.btn-outline,
button.btn-warning.qui-button.btn-outline,
button.btn-warning.btn-outline,
.btn-warning.btn-outline,
input[type="submit"].btn-warning.btn-outline:disabled:hover, /* outline disabled */
input[type="submit"].btn-warning.btn-outline:disabled:active,
input[type="button"].btn-warning.btn-outline:disabled:hover,
input[type="button"].btn-warning.btn-outline:disabled:active,
input[type="reset"].btn-warning.btn-outline:disabled:hover,
input[type="reset"].btn-warning.btn-outline:disabled:active,
button.qui-button.btn-warning.btn-outline:disabled:hover,
button.qui-button.btn-warning.btn-outline:disabled:active,
button.btn-warning.btn-outline:disabled:hover,
button.btn-warning.btn-outline:disabled:active,
.btn-warning.btn-outline.btn-disabled:hover,
.btn-warning.btn-outline.btn-disabled:active {
    color: #f4bd16;
}

/***************/
/* button info */
/***************/
input[type="submit"].btn-info,
input[type="button"].btn-info,
input[type="reset"].btn-info,
button.qui-button.btn-info,
button.btn-info,
.btn-info {
    background: #51a1c0;
    border-color: #51a1c0;
    color: #fff;
}

input[type="submit"].btn-info:hover,
input[type="submit"].btn-info:active,
input[type="button"].btn-info:hover,
input[type="button"].btn-info:active,
input[type="reset"].btn-info:hover,
input[type="reset"].btn-info:active,
button.qui-button.btn-info:hover,
button.qui-button.btn-info:active,
.btn-info:hover,
.btn-info:active {
    background: #4191b0;
    color: #fff;
    outline: none;
}

/* outline */
input[type="submit"].btn-info.btn-outline,
input[type="button"].btn-info.btn-outline,
input[type="reset"].btn-info.btn-outline,
button.btn-info.qui-button.btn-outline,
button.btn-info.btn-outline,
.btn-info.btn-outline,
input[type="submit"].btn-info.btn-outline:disabled:hover, /* outline disabled */
input[type="submit"].btn-info.btn-outline:disabled:active,
input[type="button"].btn-info.btn-outline:disabled:hover,
input[type="button"].btn-info.btn-outline:disabled:active,
input[type="reset"].btn-info.btn-outline:disabled:hover,
input[type="reset"].btn-info.btn-outline:disabled:active,
button.qui-button.btn-info.btn-outline:disabled:hover,
button.qui-button.btn-info.btn-outline:disabled:active,
button.btn-info.btn-outline:disabled:hover,
button.btn-info.btn-outline:disabled:active,
.btn-info.btn-outline.btn-disabled:hover,
.btn-info.btn-outline.btn-disabled:active {
    color: #51a1c0;
}

/***************/
/* button dark */
/***************/
input[type="submit"].btn-dark,
input[type="button"].btn-dark,
input[type="reset"].btn-dark,
button.qui-button.btn-dark,
button.btn-dark,
.btn-dark {
    background: #393f46;
    border-color: #393f46;
    color: #fff;
}

input[type="submit"].btn-dark:hover,
input[type="submit"].btn-dark:active,
input[type="button"].btn-dark:hover,
input[type="button"].btn-dark:active,
input[type="reset"].btn-dark:hover,
input[type="reset"].btn-dark:active,
button.qui-button.btn-dark:hover,
button.qui-button.btn-dark:active,
.btn-dark:hover,
.btn-dark:active {
    background: #292f36;
    color: #fff;
    outline: none;
}

/* outline */
input[type="submit"].btn-dark.btn-outline,
input[type="button"].btn-dark.btn-outline,
input[type="reset"].btn-dark.btn-outline,
button.btn-dark.qui-button.btn-outline,
button.btn-dark.btn-outline,
.btn-dark.btn-outline,
input[type="submit"].btn-dark.btn-outline:disabled:hover, /* outline disabled */
input[type="submit"].btn-dark.btn-outline:disabled:active,
input[type="button"].btn-dark.btn-outline:disabled:hover,
input[type="button"].btn-dark.btn-outline:disabled:active,
input[type="reset"].btn-dark.btn-outline:disabled:hover,
input[type="reset"].btn-dark.btn-outline:disabled:active,
button.qui-button.btn-dark.btn-outline:disabled:hover,
button.qui-button.btn-dark.btn-outline:disabled:active,
button.btn-dark.btn-outline:disabled:hover,
button.btn-dark.btn-outline:disabled:active,
.btn-dark.btn-outline.btn-disabled:hover,
.btn-dark.btn-outline.btn-disabled:active {
    color: #393f46;
}

/***************/
/* button light */
/***************/
input[type="submit"].btn-light,
input[type="button"].btn-light,
input[type="reset"].btn-light,
button.qui-button.btn-light,
button.btn-light,
.btn-light {
    background: #e5e5e5;
    border-color: #e5e5e5;
    color: #393f46;
}

input[type="submit"].btn-light:hover,
input[type="submit"].btn-light:active,
input[type="button"].btn-light:hover,
input[type="button"].btn-light:active,
input[type="reset"].btn-light:hover,
input[type="reset"].btn-light:active,
button.qui-button.btn-light:hover,
button.qui-button.btn-light:active,
.btn-light:hover,
.btn-light:active {
    background: #d5d5d5;
    color: #393f46;
    outline: none;
}

/* outline */
input[type="submit"].btn-light.btn-outline,
input[type="button"].btn-light.btn-outline,
input[type="reset"].btn-light.btn-outline,
button.btn-light.qui-button.btn-outline,
button.btn-light.btn-outline,
.btn-light.btn-outline,
input[type="submit"].btn-light.btn-outline:disabled:hover, /* outline disabled */
input[type="submit"].btn-light.btn-outline:disabled:active,
input[type="button"].btn-light.btn-outline:disabled:hover,
input[type="button"].btn-light.btn-outline:disabled:active,
input[type="reset"].btn-light.btn-outline:disabled:hover,
input[type="reset"].btn-light.btn-outline:disabled:active,
button.qui-button.btn-light.btn-outline:disabled:hover,
button.qui-button.btn-light.btn-outline:disabled:active,
button.btn-light.btn-outline:disabled:hover,
button.btn-light.btn-outline:disabled:active,
.btn-light.btn-outline.btn-disabled:hover,
.btn-light.btn-outline.btn-disabled:active {
    color: #aaa;
}

/****************/
/* button white */
/****************/
input[type="submit"].btn-white,
input[type="button"].btn-white,
input[type="reset"].btn-white,
button.qui-button.btn-white,
button.btn-white,
.btn-white {
    background: #fafafa;
    border-color: #fafafa;
    color: #393f46;
}

input[type="submit"].btn-white:hover,
input[type="submit"].btn-white:active,
input[type="button"].btn-white:hover,
input[type="button"].btn-white:active,
input[type="reset"].btn-white:hover,
input[type="reset"].btn-white:active,
button.qui-button.btn-white:hover,
button.qui-button.btn-white:active,
.btn-white:hover,
.btn-white:active {
    background: #eaeaea;
    color: #393f46;
    outline: none;
}

/* outline */
input[type="submit"].btn-white.btn-outline,
input[type="button"].btn-white.btn-outline,
input[type="reset"].btn-white.btn-outline,
button.btn-white.qui-button.btn-outline,
button.btn-white.btn-outline,
.btn-white.btn-outline,
input[type="submit"].btn-white.btn-outline:disabled:hover, /* outline disabled */
input[type="submit"].btn-white.btn-outline:disabled:active,
input[type="button"].btn-white.btn-outline:disabled:hover,
input[type="button"].btn-white.btn-outline:disabled:active,
input[type="reset"].btn-white.btn-outline:disabled:hover,
input[type="reset"].btn-white.btn-outline:disabled:active,
button.qui-button.btn-white.btn-outline:disabled:hover,
button.qui-button.btn-white.btn-outline:disabled:active,
button.btn-white.btn-outline:disabled:hover,
button.btn-white.btn-outline:disabled:active,
.btn-white.btn-outline.btn-disabled:hover,
.btn-white.btn-outline.btn-disabled:active {
    color: #fafafa;
}

/* outline hover */
input[type="submit"].btn-white.btn-outline:hover,
input[type="submit"].btn-white.btn-outline:active,
input[type="button"].btn-white.btn-outline:hover,
input[type="button"].btn-white.btn-outline:active,
input[type="reset"].btn-white.btn-outline:hover,
input[type="reset"].btn-white.btn-outline:active,
button.btn-white.btn-outline:not(:disabled):hover,
button.btn-white.btn-outline:active,
.btn-white.btn-outline:hover,
.btn-white.btn-outline:active {
    color: #393f46;
}

/**********************************/
/* button outline standard design */
/**********************************/
input[type="submit"].btn-outline,
input[type="button"].btn-outline,
input[type="reset"].btn-outline,
button.btn-outline,
.btn-outline,
.qui-button.btn-outline,
a.qui-button.btn-outline,
button.qui-button.btn-outline {
    background-color: transparent;
}

input[type="submit"].btn-outline:hover,
input[type="submit"].btn-outline:active,
input[type="button"].btn-outline:hover,
input[type="button"].btn-outline:active,
input[type="reset"].btn-outline:hover,
input[type="reset"].btn-outline:active,
button.btn-outline:not(:disabled):hover,
button.btn-outline:active,
.btn-outline:hover,
.btn-outline:active {
    color: #fff;
}

/***********************************/
/* button disabled standard design */
/***********************************/
input[type="submit"]:disabled,
input[type="button"]:disabled,
input[type="reset"]:disabled,
button.qui-button:disabled,
button:disabled,
.btn[disabled],
.btn:disabled,
a.qui-button.btn-disabled,
a.btn.btn-disabled,
.btn-disabled {
    opacity: 0.6;
}

[disabled]:hover,
:disabled:hover,
[disabled]:active,
:disabled:active,
[disabled]:hover > *,
:disabled:hover > * {
    cursor: not-allowed;
}

input[type="submit"].btn-outline:disabled:hover,
input[type="submit"].btn-outline:disabled:active,
input[type="button"].btn-outline:disabled:hover,
input[type="button"].btn-outline:disabled:active,
input[type="reset"].btn-outline:disabled:hover,
input[type="reset"].btn-outline:disabled:active,
button.qui-button.btn-outline:disabled:hover,
button.qui-button.btn-outline:disabled:active,
button.btn-outline:disabled:hover,
button.btn-outline:disabled:active,
.btn-outline.btn-disabled:hover,
.btn-outline.btn-disabled:active {
    opacity: 0.3;
}

/****************/
/* button sizes */
/****************/
.btn-small,
input[type="submit"].btn-small,
input[type="button"].btn-small,
input[type="reset"].btn-small,
.qui-button.btn-small {
    padding: .25rem .5rem;
    font-size: .875rem;
    line-height: 1.5;
    border-radius: .2rem;
    height: auto;
}

.btn-large,
input[type="submit"].btn-large,
input[type="button"].btn-large,
input[type="reset"].btn-large,
.qui-button.btn-large {
    padding: .5rem 1rem;
    font-size: 1.25rem;
    line-height: 1.5;
    border-radius: .3rem;
    height: auto;

}