@charset "UTF-8";
.btn.bst-btn-animate.bst-btn-animate-diagonal{
    background-size: 300%;
    background-repeat: no-repeat;
    background-position: 0%;
    transition: all 0.5s ease-in-out;
}
.btn.bst-btn-animate.bst-btn-animate-diagonal:hover{
    background-position: 100%;
}
.btn.btn-primary.bst-btn-animate.bst-btn-animate-diagonal{
    background-image: -webkit-linear-gradient(30deg, transparent 50%, var(--primary-btn-hover-bg) 50%);
    background-image: linear-gradient(30deg, transparent 50%, var(--primary-btn-hover-bg) 50%);
}
.btn.btn-primary.bst-btn-animate.bst-btn-animate-diagonal:hover{
    border-color: var(--primary-btn-hover-brd);
    color: var(--primary-btn-hover-fg);
    background-color: var(--primary);
}
.btn.btn-secondary.bst-btn-animate.bst-btn-animate-diagonal{
    background-image: -webkit-linear-gradient(30deg, var(--secondary) 50%, var(--secondary-btn-hover-bg) 50%);
    background-image: linear-gradient(30deg, var(--secondary) 50%, var(--secondary-btn-hover-bg) 50%);
}
.btn.btn-secondary.bst-btn-animate.bst-btn-animate-diagonal:hover{
    border-color: var(--secondary-btn-hover-brd);
    color: var(--secondary-btn-hover-fg);
}
.btn.btn-success.bst-btn-animate.bst-btn-animate-diagonal{
    background-image: -webkit-linear-gradient(30deg, transparent 50%, var(--success-btn-hover-bg) 50%);
    background-image: linear-gradient(30deg, transparent 50%, var(--success-btn-hover-bg) 50%);
}
.btn.btn-success.bst-btn-animate.bst-btn-animate-diagonal:hover{
    border-color: var(--success-btn-hover-brd);
    color: var(--success-btn-hover-fg);
}
.btn.btn-info.bst-btn-animate.bst-btn-animate-diagonal{
    background-image: -webkit-linear-gradient(30deg, transparent 50%, var(--info-btn-hover-bg) 50%);
    background-image: linear-gradient(30deg, transparent 50%, var(--info-btn-hover-bg) 50%);
}
.btn.btn-info.bst-btn-animate.bst-btn-animate-diagonal:hover{
    border-color: var(--info-btn-hover-brd);
    color: var(--info-btn-hover-fg);
}
.btn.btn-warning.bst-btn-animate.bst-btn-animate-diagonal{
    background-image: -webkit-linear-gradient(30deg, transparent 50%, var(--warning-btn-hover-bg) 50%);
    background-image: linear-gradient(30deg, transparent 50%, var(--warning-btn-hover-bg) 50%);
}
.btn.btn-warning.bst-btn-animate.bst-btn-animate-diagonal:hover{
    border-color: var(--warning-btn-hover-brd);
    color: var(--warning-btn-hover-fg);
}
.btn.btn-danger.bst-btn-animate.bst-btn-animate-diagonal{
    background-image: -webkit-linear-gradient(30deg, transparent 50%, var(--danger-btn-hover-bg) 50%);
    background-image: linear-gradient(30deg, transparent 50%, var(--danger-btn-hover-bg) 50%);
}
.btn.btn-danger.bst-btn-animate.bst-btn-animate-diagonal:hover{
    border-color: var(--danger-btn-hover-brd);
    color: var(--danger-btn-hover-fg);
}
/* expand */
.btn.bst-btn-animate.bst-btn-animate-expand{
    position: relative;
    z-index: 1;
    transition: all 0.5s ease-in-out;
}
.btn.bst-btn-animate.bst-btn-animate-expand:before {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    transform: scale(0);
    transition: 0.5s ease-in-out;
    z-index: -1;
    overflow: hidden;
}
.btn.bst-btn-animate.bst-btn-animate-expand:hover:before {
    transform: scale(1);
}
.btn.btn-primary.bst-btn-animate.bst-btn-animate-expand:before{
    background: var(--primary-btn-hover-bg);
}
.btn.btn-primary.bst-btn-animate.bst-btn-animate-expand:hover {
    border-color: var(--primary-btn-hover-brd);
    color: var(--primary-btn-hover-fg);
    background-color: var(--primary);
}
.btn.btn-secondary.bst-btn-animate.bst-btn-animate-expand:before{
    background: var(--secondary-btn-hover-bg);
}
.btn.btn-secondary.bst-btn-animate.bst-btn-animate-expand:hover {
    border-color: var(--secondary-btn-hover-brd);
    color: var(--secondary-btn-hover-fg);
    background-color: var(--secondary);
}
.btn.btn-success.bst-btn-animate.bst-btn-animate-expand:before{
    background: var(--success-btn-hover-bg);
}
.btn.btn-success.bst-btn-animate.bst-btn-animate-expand:hover {
    border-color: var(--success-btn-hover-brd);
    color: var(--success-btn-hover-fg);
    background-color: var(--success);
}
.btn.btn-info.bst-btn-animate.bst-btn-animate-expand:before{
    background: var(--info-btn-hover-bg);
}
.btn.btn-info.bst-btn-animate.bst-btn-animate-expand:hover {
    border-color: var(--info-btn-hover-brd);
    color: var(--info-btn-hover-fg);
    background-color: var(--info);
}
.btn.btn-warning.bst-btn-animate.bst-btn-animate-expand:before{
    background: var(--warning-btn-hover-bg);
}
.btn.btn-warning.bst-btn-animate.bst-btn-animate-expand:hover {
    border-color: var(--warning-btn-hover-brd);
    color: var(--warning-btn-hover-fg);
    background-color: var(--warning);
}
.btn.btn-danger.bst-btn-animate.bst-btn-animate-expand:before{
    background: var(--danger-btn-hover-bg);
}
.btn.btn-danger.bst-btn-animate.bst-btn-animate-expand:hover {
    border-color: var(--danger-btn-hover-brd);
    color: var(--danger-btn-hover-fg);
    background-color: var(--danger);
}
/* Shine */
.btn.bst-btn-animate.bst-btn-animate-shine{
    position: relative;
    overflow: hidden;
}
.btn.bst-btn-animate.bst-btn-animate-shine:before{
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.4), transparent );
    transition: all 650ms;
}
.btn.bst-btn-animate.bst-btn-animate-shine:hover:before{
    left: 100%;
}
.btn.btn-primary.bst-btn-animate.bst-btn-animate-shine:hover{
    background-color: var(--primary);
}
.btn.btn-secondary.bst-btn-animate.bst-btn-animate-shine:hover{
    background-color: var(--secondary);
}
.btn.btn-success.bst-btn-animate.bst-btn-animate-shine:hover{
    background-color: var(--success);
}