CyberExam-django/static/scss/components/_buttons.scss

// Fixes
.btn-outline-secondary {
    color: darken(theme-color("secondary"), 50%);
}

// Sizes
.btn-xl {
    @include button-size($btn-padding-y-xl, $btn-padding-x-xl, $font-size-xl, $btn-line-height-xl, $btn-border-radius-xl);
}

// Icons
.btn svg:not(:first-child),
.btn i:not(:first-child) {
    margin-left: 0.5rem;
}
 
.btn svg:not(:last-child),
.btn i:not(:last-child) {
    margin-right: 0.5rem;
}

// Animated 
.btn-animated {
    position: relative;
    overflow: hidden;

    .btn-inner--visible {
        position: relative;
    }
    .btn-inner--hidden {
        position: absolute;
        width: 100%;
        top: 50%;
        transform: translateY(-50%);
    }
}

.btn-animated-x {
    .btn-inner--visible {
        right: 0;
        -webkit-transition: right .3s ease 0s;
        transition: right .3s ease 0s;
    }
    .btn-inner--hidden {
        right: -100%;
        -webkit-transition: right .3s ease 0s;
        transition: right .3s ease 0s;
    }

    &:hover .btn-inner--hidden {
        right: 0;
    }

    &:hover .btn-inner--visible {
        right: 150%;
    }
}

.btn-animated-y {
    .btn-inner--visible {
        top: 0;
        -webkit-transition: top .3s ease 0s;
        transition: top .3s ease 0s;
    }
    .btn-inner--hidden {
        left: 0;
        bottom: -150%;
        -webkit-transition: bottom .3s ease 0s;
        transition: bottom .3s ease 0s;
    }

    &:hover .btn-inner--hidden {
        bottom: 0;
    }

    &:hover .btn-inner--visible {
        top: 100px;
    }
}

// Labeled 
.btn-action-label {
    .btn-label:hover {
        background: transparent;
        color: $gray-800;
    }
    .btn-secondary:hover {
        color: theme-color("primary");
    }
}

// Icon labels
.btn-icon-label {
    position: relative;

    .btn-inner--icon {
        position: absolute;
        height: 100%;
        line-height: 1;
        border-radius: 0;
        text-align: center;
        margin: 0;
        width: 3em;
        background-color: rgba(0, 0, 0, .1);
    }
    .btn-inner--icon:not(:first-child) {
        right: 0;
        top: 0;
        border-top-right-radius: inherit;
        border-bottom-right-radius: inherit;
    }
    .btn-inner--icon:not(:last-child) {
        left: 0;
        top: 0;
        border-top-left-radius: inherit;
        border-bottom-left-radius: inherit;
    }
    .btn-inner--icon svg {
        position: relative;
        top: 50%;
        transform: translateY(-50%);
    }

    .btn-inner--text:not(:first-child) {
        padding-left: 3em;
    }
    .btn-inner--text:not(:last-child) {
        padding-right: 3em;
    }
}

// Icons 
.btn-icon {
    .btn-inner--text:not(:first-child) {
        margin-left: 0.75em;
    }
    .btn-inner--text:not(:last-child) {
        margin-right: 0.75em;
    }
}

.btn-icon-only {
    width: 3rem;
    height: 3rem;
    padding: 0;
}
a.btn-icon-only {
    line-height: 3rem;
}
.btn-icon-only.btn-sm {
    width: 2rem;
    height: 2rem;
}


// Transparent buttons (remove horizontal paddings)
.btn-nobg {
    padding: 0;
    background: transparent !important;

    &:hover {
        background: transparent !important;
        border-color: transparent !important;
    }
}

// Brand buttons
@each $color,
$value in $brand-colors {
    .btn-#{$color} {
        @include button-variant($value, $value);
    }
}

// Hover animations
.btn-zoom--hover:hover {
    transform: scale(1.1);
}