safekat/httpdocs/themes/focus2/scss/components/ui/_ui-button.scss

// .qx_btn{
//     min-height: 50px;
//     min-width: 100px;
//     // font-weight: 700;
//     font-size: 16px;
// }


button{
    cursor: pointer;

    &:focus{
        outline: 0;
        box-shadow: none;
    }
}




.btn {
    // border-radius: 0px;
    // box-shadow: 0 4px 6px rgba(50,50,93,.05), 0 1px 3px rgba(0,0,0,.08);
    &:hover, &:focus, &:active, &.active{
        outline: 0!important;
        // box-shadow: 0 4px 05x rgba(50,50,93,.05), 0 1px 3px rgba(0,0,0,.08);
    }

    &-transparent {
        background-color: transparent;
    }


}


// .btn-primary {
//     -webkit-box-shadow: 0 2px 6px 0 rgba(114,124,245,.5);
//     box-shadow: 0 2px 6px 0 rgba(114,124,245,.5);
// }


// .btn-secondary {
//     -webkit-box-shadow: 0 2px 6px 0 rgba(108,117,125,.5);
//     box-shadow: 0 2px 6px 0 rgba(108,117,125,.5);
// }

// .btn-success {
//     -webkit-box-shadow: 0 2px 6px 0 rgba(10,207,151,.5);
//     box-shadow: 0 2px 6px 0 rgba(10,207,151,.5);
// }

// .btn-danger {
//     -webkit-box-shadow: 0 2px 6px 0 rgba(250,92,124,.5);
//     box-shadow: 0 2px 6px 0 rgba(250,92,124,.5);
// }

// .btn-warning {
//     -webkit-box-shadow: 0 2px 6px 0 rgba(255,188,0,.5);
//     box-shadow: 0 2px 6px 0 rgba(255,188,0,.5);
// }

// .btn-info {
//     -webkit-box-shadow: 0 2px 6px 0 rgba(57,175,209,.5);
//     box-shadow: 0 2px 6px 0 rgba(57,175,209,.5);
// }

// .btn-light {
//     -webkit-box-shadow: 0 2px 6px 0 rgba(227,234,239,.5);
//     box-shadow: 0 2px 6px 0 rgba(227,234,239,.5);
// }

// .btn-dark {
//     -webkit-box-shadow: 0 2px 6px 0 rgba(49,58,70,.5);
//     box-shadow: 0 2px 6px 0 rgba(49,58,70,.5);
// }




.btn-xs {
    font-size: 0.75rem;
    padding-top: .2rem;
    padding-bottom: .2rem;
    // padding  : 0.5 2.5rem !important;
}

.btn-sm {
    font-size: 0.875rem !important;
}

.btn-lg{
    padding: 0.58rem 1rem;
    font-size: 0.875rem !important;
}

.btn-xl{
    padding: 0.6rem 1rem;

    &.btn-default{
        font-weight: 600;
    }
}

.btn-square {
    border-radius: 0;
}

.btn-rounded {
    border-radius: 30px !important;
}

.btn-icon-right {
    border-left: 1px solid rgba($white, 22%);
    display    : inline-block;
    margin     : -.8rem 0 -.8rem 1.3rem;
    padding    : 0.4375rem 0 0.4375rem 1.3rem;
}

.btn-icon-left {
    background   : $white;
    border-radius: 10rem;
    display      : inline-block;
    margin       : -.5rem 1.3rem -.5rem -1.5rem;
    padding      : .5rem 1rem .6rem;
}

.toggle-dropdown::after {
    margin-left: 0.755em;
}

.social-btn-icon {
    .btn {
        min-width    : 7.5rem;
        margin-bottom: 1.5rem;
    }
}

.social-icon {
    .btn {
        padding: .7rem 1.4rem;
    }
}

.btn-circle {
    height       : 5rem;
    width        : 5rem;
    border-radius: 50% !important;

    &-sm {
        width: 4.5rem;
        height: 4.5rem;
        font-size: 1.8rem;
    }

    &-md {
        width: 6rem;
        height: 6rem;
        font-size: 2.5rem;

        i{
            font-size: 2.4rem;
        }
    }

    &-lg {
        width: 8rem;
        height: 8rem;
        font-size: 3.2rem;

        i{
            font-size: 3.1rem;
        }
    }
}

.btn-page{
    .btn{
        min-width: 110px;
        margin-right: 4px;
        margin-bottom: 8px;

    }

}



// btn sizes
.size-1{
    min-width: 160px !important;
    font-size: 24px;
    padding: 0.68rem 0.75rem;
}

.size-2{
    font-size: 20px;
    min-width: 130px !important;
    padding: 0.57rem 0.75rem;
}

.size-3{
    font-size: 14px;
    min-width: 110px !important;
    padding: 0.536rem 0.75rem;
}
.size-4{
    font-size: 14px;
    min-width: 100px !important;
}
.size-5{
    font-size: 14px;
    min-width: 90px !important;
    padding: .22rem 0.75rem;
}
.size-6{
    font-size: 13px;
    min-width: 80px !important;
    padding: 0.097rem 0.75rem;
}
.size-7{
    font-size: 12px;
    min-width: 60px !important;
    padding: 0.001rem 0.75rem;
}





.btn-light {
    background  : $light;
    border-color: $border;
    color       : $dark;
    
    
    &:active,
    &:focus,
    &:hover {
        background  : lighten($light, 25%);
        color       : $dark;
        border-color: lighten($light, 25%);
    }
}

.btn-outline-light{
    color: $dark;
}



.btn-dark {
    background  : $dark;
    border-color: $dark;
    color       : $white;
    
    
    &:active,
    &:focus,
    &:hover {
        background  : darken($dark, 10%);
        color       : $white;
        border-color: darken($dark, 10%);
    }
}

.btn-group{

    &.btn-rounded{

        .btn:first-child{
            border-top-left-radius: 30px;
            border-bottom-left-radius: 30px;
        }

        .btn:last-child{
            border-top-right-radius: 30px;
            border-bottom-right-radius: 30px;
        }
    }
}



///////////////////
// Social Buttons
///////////////////

.btn-facebook {
    background  : $facebook;
    border-color: $facebook;
    color       : $white;

    &:active,
    &:focus,
    &:hover {
        background  : darken($facebook, 10%);
        color       : $white;
        border-color: darken($facebook, 10%);
    }
}

.btn-twitter {
    background  : $twitter;
    border-color: $twitter;
    color       : $white;

    &:active,
    &:focus,
    &:hover {
        background  : darken($twitter, 10%);
        color       : $white;
        border-color: darken($twitter, 10%);
    }
}

.btn-youtube {
    background  : $youtube;
    border-color: $youtube;
    color       : $white;

    &:active,
    &:focus,
    &:hover {
        background  : darken($youtube, 10%);
        color       : $white;
        border-color: darken($youtube, 10%);
    }
}

.btn-instagram {
    background  : $instagram;
    border-color: $instagram;
    color       : $white;

    &:active,
    &:focus,
    &:hover {
        background  : darken($instagram, 10%);
        color       : $white;
        border-color: darken($instagram, 10%);
    }
}

.btn-pinterest {
    background  : $pinterest;
    border-color: $pinterest;
    color       : $white;

    &:active,
    &:focus,
    &:hover {
        background  : darken($pinterest, 10%);
        color       : $white;
        border-color: darken($pinterest, 10%);
    }
}

.btn-linkedin {
    background  : $linkedin;
    border-color: $linkedin;
    color       : $white;

    &:active,
    &:focus,
    &:hover {
        background  : darken($linkedin, 10%);
        color       : $white;
        border-color: darken($linkedin, 10%);
    }
}

.btn-google-plus {
    background  : $google-plus;
    border-color: $google-plus;
    color       : $white;

    &:active,
    &:focus,
    &:hover {
        background  : darken($google-plus, 10%);
        color       : $white;
        border-color: darken($google-plus, 10%);
    }
}

.btn-google {
    background  : $google;
    border-color: $google;
    color       : $white;

    &:active,
    &:focus,
    &:hover {
        background  : darken($google, 10%);
        color       : $white;
        border-color: darken($google, 10%);
    }
}

.btn-snapchat {
    background  : $snapchat;
    border-color: $snapchat;
    color       : $black;

    &:active,
    &:focus,
    &:hover {
        background  : darken($snapchat, 10%);
        color       : $black;
        border-color: darken($snapchat, 10%);
    }
}

.btn-whatsapp {
    background  : $whatsapp;
    border-color: $whatsapp;
    color       : $white;

    &:active,
    &:focus,
    &:hover {
        background  : darken($whatsapp, 10%);
        color       : $white;
        border-color: darken($whatsapp, 10%);
    }
}

.btn-tumblr {
    background  : $tumblr;
    border-color: $tumblr;
    color       : $white;

    &:active,
    &:focus,
    &:hover {
        background  : darken($tumblr, 10%);
        color       : $white;
        border-color: darken($tumblr, 10%);
    }
}

.btn-reddit {
    background  : $reddit;
    border-color: $reddit;
    color       : $white;

    &:active,
    &:focus,
    &:hover {
        background  : darken($reddit, 10%);
        color       : $white;
        border-color: darken($reddit, 10%);
    }
}

.btn-spotify {
    background  : $spotify;
    border-color: $spotify;
    color       : $white;

    &:active,
    &:focus,
    &:hover {
        background  : darken($spotify, 10%);
        color       : $white;
        border-color: darken($spotify, 10%);
    }
}

.btn-yahoo {
    background  : $yahoo;
    border-color: $yahoo;
    color       : $white;

    &:active,
    &:focus,
    &:hover {
        background  : darken($yahoo, 10%);
        color       : $white;
        border-color: darken($yahoo, 10%);
    }
}

.btn-dribbble {
    background  : $dribbble;
    border-color: $dribbble;
    color       : $white;

    &:active,
    &:focus,
    &:hover {
        background  : darken($dribbble, 10%);
        color       : $white;
        border-color: darken($dribbble, 10%);
    }
}

.btn-skype {
    background  : $skype;
    border-color: $skype;
    color       : $white;

    &:active,
    &:focus,
    &:hover {
        background  : darken($skype, 10%);
        color       : $white;
        border-color: darken($skype, 10%);
    }
}

.btn-quora {
    background  : $quora;
    border-color: $quora;
    color       : $white;

    &:active,
    &:focus,
    &:hover {
        background  : darken($quora, 10%);
        color       : $white;
        border-color: darken($quora, 10%);
    }
}

.btn-vimeo {
    background  : $vimeo;
    border-color: $vimeo;
    color       : $white;

    &:active,
    &:focus,
    &:hover {
        background  : darken($vimeo, 10%);
        color       : $white;
        border-color: darken($vimeo, 10%);
    }
}