cronapp-framework-js/css/themes/custom/fuse/button-fuse.css

Javascript library for CronApp's projects

.btn,
.k-button {
    text-align: center;
    border-radius: 9999px;
    padding: 14px 22px;
    border: 0;
    outline: none;
}

.btn.active,
.btn:active,
.btn:focus,
.btn:hover,
.btn:focus:hover,
.k-button:focus:hover {
    box-shadow: none;
    background-image: none;
    border-color: transparent;
}

/* Default */
.btn.active,
.btn:active,
.k-button.active,
.k-button:active,
.btn.btn-default.active,
.btn.btn-default:active,
.k-button.k-default.active,
.k-button.k-default:active {
    background: var(--colorDefault30, #565f6c);
    color: var(--textColorDefault40, #ffffff);
}

/* Primary */
.btn.btn-primary.active,
.btn.btn-primary:active,
.k-button.k-primary.active,
.k-button.k-primary:active {
    background: var(--colorPrimary30, #8d8aeb);
    color: var(--textColorPrimary40, #ffffff);
}

/* Success */
.btn.btn-success.active,
.btn.btn-success:active,
.k-button.k-success.active,
.k-button.k-success:active {
    background: var(--colorSuccess30, #7fd494);
    color: var(--textColorSuccess40, #ffffff);
}

/* Warning */
.btn.btn-warning.active,
.btn.btn-warning:active,
.k-button.k-warning.active,
.k-button.k-warning:active {
    background: var(--colorWarning30, #f7b97c);
    color: var(--textColorWarning40, #ffffff);
}

/* Danger */
.btn.btn-danger.active,
.btn.btn-danger:active,
.k-button.k-danger.active,
.k-button.k-danger:active {
    background: var(--colorDanger30, #f38989);
    color: var(--textColorDanger40, #ffffff);
}

/* Info */
.k-button.k-info,
.btn.btn-info {
    background: var(--colorLight40, #ffffff);
    border: 1px solid var(--textColor20, #b2b2b2);
    color: var(--textColor40, #383838);
}

.k-button.k-info:focus,
.k-button.k-info:hover,
.btn.btn-info:focus,
.btn.btn-info:hover {
    color: var(--textColor40, #383838);
    background: var(--colorLight50, #dfdfdf);
    border: 1px solid var(--textColor20, #b2b2b2);
}

.btn.btn-info.active,
.btn.btn-info:active,
.k-button.k-info.active,
.k-button.k-info:active {
    background: var(--textColor20, #b2b2b2);
    color: var(--textColor40, #383838);
    border: 1px solid var(--textColor20, #b2b2b2);
}

/* Light */
.k-button.k-light,
.btn.btn-light {
    background: var(--colorLight50, #dfdfdf);
    color: var(--textColor40, #383838);
}

.k-button.k-light:focus,
.k-button.k-light:hover,
.btn.btn-light:focus,
.btn.btn-light:hover {
    color: var(--textColor40, #383838);
    background: var(--colorLight60, #bbbbbb);
}

.btn.btn-light.active,
.btn.btn-light:active,
.k-button.k-light.active,
.k-button.k-light:active {
    background: var(--colorLight40, #ffffff);
    color: var(--textColor40, #383838);
}

/* Link */
.btn.btn-link {
    background: transparent;
    border: none;
}

.btn.btn-link i,
.btn.btn-link span {
    color: var(--colorPrimary40, #4f46e5);
}

.btn.btn-link:focus,
.btn.btn-link:hover {
    color: var(--colorPrimary40, #4f46e5);
    text-decoration: underline;
    background: transparent;
}

.btn.btn-link:focus i,
.btn.btn-link:hover i {
    text-decoration: none;
}

.btn.btn-link i,
.btn.btn-link span,
.btn.btn-link:focus,
.btn.btn-link:hover,
.btn.btn-link.disabled,
.btn.btn-link[disabled]:hover {
    color: var(--colorPrimary40, #4f46e5);
    outline: none;
}

.btn.btn-fab,
.btn-fab {
    border-radius: var(--borderRadiusFull, 99999px);
    padding: 14px 22px;
    width: auto;
}