/*--------------------------------------------------
    [Buttons On Hover]
----------------------------------------------------*/

/* Button Base Color */
.btn-base {
    @include buttons($color-base, $color-white, transparent, $color-base, 1px, transparent, $color-base, transparent);

    .btn-base-element-xs {
        @include buttons-element(transparent, darken($color-base, 4%), 6px 9px);
    }

    .btn-base-element-sm {
        @include buttons-element(transparent, darken($color-base, 4%), 9px 11px);
    }

    .btn-base-element-md {
        @include buttons-element(transparent, darken($color-base, 4%), 12px 13px);
    }

    .btn-base-element-lg {
        @include buttons-element(transparent, darken($color-base, 4%), 15px 15px);
    }
}

/* Button Base White Color */
.btn-white {
    @include buttons($color-white, $color-dark, transparent, $color-white, 1px, transparent, $color-white, transparent);

    .btn-base-element-xs {
        @include buttons-element(transparent, darken($color-white, 6%), 6px 9px);
    }

    .btn-base-element-sm {
        @include buttons-element(transparent, darken($color-white, 6%), 9px 11px);
    }

    .btn-base-element-md {
        @include buttons-element(transparent, darken($color-white, 6%), 12px 13px);
    }

    .btn-base-element-lg {
        @include buttons-element(transparent, darken($color-white, 6%), 15px 15px);
    }
}

/* Button Dark Color */
.btn-dark {
    @include buttons($color-dark, $color-white, transparent, $color-dark, 1px, transparent, $color-dark, transparent);

    .btn-base-element-xs {
        @include buttons-element(transparent, darken($color-dark, 4%), 6px 9px);
    }

    .btn-base-element-sm {
        @include buttons-element(transparent, darken($color-dark, 4%), 9px 11px);
    }

    .btn-base-element-md {
        @include buttons-element(transparent, darken($color-dark, 4%), 12px 13px);
    }

    .btn-base-element-lg {
        @include buttons-element(transparent, darken($color-dark, 4%), 15px 15px);
    }
}

/* Button Grey Color */
.btn-grey {
    @include buttons($color-grey, $color-white, transparent, $color-grey, 1px, transparent, $color-grey, transparent);

    .btn-base-element-xs {
        @include buttons-element(transparent, darken($color-grey, 4%), 6px 9px);
    }

    .btn-base-element-sm {
        @include buttons-element(transparent, darken($color-grey, 4%), 9px 11px);
    }

    .btn-base-element-md {
        @include buttons-element(transparent, darken($color-grey, 4%), 12px 13px);
    }

    .btn-base-element-lg {
        @include buttons-element(transparent, darken($color-grey, 4%), 15px 15px);
    }
}

/* Button Blue Grey Color */
.btn-blue-grey {
    @include buttons($color-blue-grey, $color-white, transparent, $color-blue-grey, 1px, transparent, $color-blue-grey, transparent);

    .btn-base-element-xs {
        @include buttons-element(transparent, darken($color-blue-grey, 4%), 6px 9px);
    }

    .btn-base-element-sm {
        @include buttons-element(transparent, darken($color-blue-grey, 4%), 9px 11px);
    }

    .btn-base-element-md {
        @include buttons-element(transparent, darken($color-blue-grey, 4%), 12px 13px);
    }

    .btn-base-element-lg {
        @include buttons-element(transparent, darken($color-blue-grey, 4%), 15px 15px);
    }
}

/* Button Blue Color */
.btn-blue {
    @include buttons($color-blue, $color-white, transparent, $color-blue, 1px, transparent, $color-blue, transparent);

    .btn-base-element-xs {
        @include buttons-element(transparent, darken($color-blue, 4%), 6px 9px);
    }

    .btn-base-element-sm {
        @include buttons-element(transparent, darken($color-blue, 4%), 9px 11px);
    }

    .btn-base-element-md {
        @include buttons-element(transparent, darken($color-blue, 4%), 12px 13px);
    }

    .btn-base-element-lg {
        @include buttons-element(transparent, darken($color-blue, 4%), 15px 15px);
    }
}

/* Button Teal Color */
.btn-teal {
    @include buttons($color-teal, $color-white, transparent, $color-teal, 1px, transparent, $color-teal, transparent);

    .btn-base-element-xs {
        @include buttons-element(transparent, darken($color-teal, 4%), 6px 9px);
    }

    .btn-base-element-sm {
        @include buttons-element(transparent, darken($color-teal, 4%), 9px 11px);
    }

    .btn-base-element-md {
        @include buttons-element(transparent, darken($color-teal, 4%), 12px 13px);
    }

    .btn-base-element-lg {
        @include buttons-element(transparent, darken($color-teal, 4%), 15px 15px);
    }
}

/* Button Green Color */
.btn-green {
    @include buttons($color-green, $color-white, transparent, $color-green, 1px, transparent, $color-green, transparent);

    .btn-base-element-xs {
        @include buttons-element(transparent, darken($color-green, 4%), 6px 9px);
    }

    .btn-base-element-sm {
        @include buttons-element(transparent, darken($color-green, 4%), 9px 11px);
    }

    .btn-base-element-md {
        @include buttons-element(transparent, darken($color-green, 4%), 12px 13px);
    }

    .btn-base-element-lg {
        @include buttons-element(transparent, darken($color-green, 4%), 15px 15px);
    }
}

/* Button Red Color */
.btn-red {
    @include buttons($color-red, $color-white, transparent, $color-red, 1px, transparent, $color-red, transparent);

    .btn-base-element-xs {
        @include buttons-element(transparent, darken($color-red, 4%), 6px 9px);
    }

    .btn-base-element-sm {
        @include buttons-element(transparent, darken($color-red, 4%), 9px 11px);
    }

    .btn-base-element-md {
        @include buttons-element(transparent, darken($color-red, 4%), 12px 13px);
    }

    .btn-base-element-lg {
        @include buttons-element(transparent, darken($color-red, 4%), 15px 15px);
    }
}

/* Button Pink Color */
.btn-pink {
    @include buttons($color-pink, $color-white, transparent, $color-pink, 1px, transparent, $color-pink, transparent);

    .btn-base-element-xs {
        @include buttons-element(transparent, darken($color-pink, 4%), 6px 9px);
    }

    .btn-base-element-sm {
        @include buttons-element(transparent, darken($color-pink, 4%), 9px 11px);
    }

    .btn-base-element-md {
        @include buttons-element(transparent, darken($color-pink, 4%), 12px 13px);
    }

    .btn-base-element-lg {
        @include buttons-element(transparent, darken($color-pink, 4%), 15px 15px);
    }
}

/* Button Purple Color */
.btn-purple {
    @include buttons($color-purple, $color-white, transparent, $color-purple, 1px, transparent, $color-purple, transparent);

    .btn-base-element-xs {
        @include buttons-element(transparent, darken($color-purple, 4%), 6px 9px);
    }

    .btn-base-element-sm {
        @include buttons-element(transparent, darken($color-purple, 4%), 9px 11px);
    }

    .btn-base-element-md {
        @include buttons-element(transparent, darken($color-purple, 4%), 12px 13px);
    }

    .btn-base-element-lg {
        @include buttons-element(transparent, darken($color-purple, 4%), 15px 15px);
    }
}

/* Button Gold Color */
.btn-gold {
    @include buttons($color-gold, $color-white, transparent, $color-gold, 1px, transparent, $color-gold, transparent);

    .btn-base-element-xs {
        @include buttons-element(transparent, darken($color-gold, 4%), 6px 9px);
    }

    .btn-base-element-sm {
        @include buttons-element(transparent, darken($color-gold, 4%), 9px 11px);
    }

    .btn-base-element-md {
        @include buttons-element(transparent, darken($color-gold, 4%), 12px 13px);
    }

    .btn-base-element-lg {
        @include buttons-element(transparent, darken($color-gold, 4%), 15px 15px);
    }
}


/*--------------------------------------------------
    [Buttons Border]
----------------------------------------------------*/

/* Button Base Color */
.btn-base-brd {
    @include buttons($color-base, $color-white, transparent, $color-base, 1px, $color-base, $color-base, transparent);

    .btn-base-element-xs {
        @include buttons-element(transparent, darken($color-base, 4%), 6px 9px);
    }

    .btn-base-element-sm {
        @include buttons-element(transparent, darken($color-base, 4%), 9px 11px);
    }

    .btn-base-element-md {
        @include buttons-element(transparent, darken($color-base, 4%), 12px 13px);
    }

    .btn-base-element-lg {
        @include buttons-element(transparent, darken($color-base, 4%), 15px 15px);
    }
}

/* Button Base White Color */
.btn-white-brd {
    @include buttons($color-white, $color-dark, transparent, $color-white, 1px, $color-white, $color-white, transparent);

    .btn-base-element-xs {
        @include buttons-element(transparent, darken($color-white, 6%), 6px 9px);
    }

    .btn-base-element-sm {
        @include buttons-element(transparent, darken($color-white, 6%), 9px 11px);
    }

    .btn-base-element-md {
        @include buttons-element(transparent, darken($color-white, 6%), 12px 13px);
    }

    .btn-base-element-lg {
        @include buttons-element(transparent, darken($color-white, 6%), 15px 15px);
    }
}

/* Button Dark Color */
.btn-dark-brd {
    @include buttons($color-dark, $color-white, transparent, $color-dark, 1px, $color-dark, $color-dark, transparent);

    .btn-base-element-xs {
        @include buttons-element(transparent, darken($color-dark, 4%), 6px 9px);
    }

    .btn-base-element-sm {
        @include buttons-element(transparent, darken($color-dark, 4%), 9px 11px);
    }

    .btn-base-element-md {
        @include buttons-element(transparent, darken($color-dark, 4%), 12px 13px);
    }

    .btn-base-element-lg {
        @include buttons-element(transparent, darken($color-dark, 4%), 15px 15px);
    }
}

/* Button Grey Color */
.btn-grey-brd {
    @include buttons($color-grey, $color-white, transparent, $color-grey, 1px, $color-grey, $color-grey, transparent);

    .btn-base-element-xs {
        @include buttons-element(transparent, darken($color-grey, 4%), 6px 9px);
    }

    .btn-base-element-sm {
        @include buttons-element(transparent, darken($color-grey, 4%), 9px 11px);
    }

    .btn-base-element-md {
        @include buttons-element(transparent, darken($color-grey, 4%), 12px 13px);
    }

    .btn-base-element-lg {
        @include buttons-element(transparent, darken($color-grey, 4%), 15px 15px);
    }
}

/* Button Blue Grey Color */
.btn-blue-grey-brd {
    @include buttons($color-blue-grey, $color-white, transparent, $color-blue-grey, 1px, $color-blue-grey, $color-blue-grey, transparent);

    .btn-base-element-xs {
        @include buttons-element(transparent, darken($color-blue-grey, 4%), 6px 9px);
    }

    .btn-base-element-sm {
        @include buttons-element(transparent, darken($color-blue-grey, 4%), 9px 11px);
    }

    .btn-base-element-md {
        @include buttons-element(transparent, darken($color-blue-grey, 4%), 12px 13px);
    }

    .btn-base-element-lg {
        @include buttons-element(transparent, darken($color-blue-grey, 4%), 15px 15px);
    }
}

/* Button Blue Color */
.btn-blue-brd {
    @include buttons($color-blue, $color-white, transparent, $color-blue, 1px, $color-blue, $color-blue, transparent);

    .btn-base-element-xs {
        @include buttons-element(transparent, darken($color-blue, 4%), 6px 9px);
    }

    .btn-base-element-sm {
        @include buttons-element(transparent, darken($color-blue, 4%), 9px 11px);
    }

    .btn-base-element-md {
        @include buttons-element(transparent, darken($color-blue, 4%), 12px 13px);
    }

    .btn-base-element-lg {
        @include buttons-element(transparent, darken($color-blue, 4%), 15px 15px);
    }
}

/* Button Teal Color */
.btn-teal-brd {
    @include buttons($color-teal, $color-white, transparent, $color-teal, 1px, $color-teal, $color-teal, transparent);

    .btn-base-element-xs {
        @include buttons-element(transparent, darken($color-teal, 4%), 6px 9px);
    }

    .btn-base-element-sm {
        @include buttons-element(transparent, darken($color-teal, 4%), 9px 11px);
    }

    .btn-base-element-md {
        @include buttons-element(transparent, darken($color-teal, 4%), 12px 13px);
    }

    .btn-base-element-lg {
        @include buttons-element(transparent, darken($color-teal, 4%), 15px 15px);
    }
}

/* Button Green Color */
.btn-green-brd {
    @include buttons($color-green, $color-white, transparent, $color-green, 1px, $color-green, $color-green, transparent);

    .btn-base-element-xs {
        @include buttons-element(transparent, darken($color-green, 4%), 6px 9px);
    }

    .btn-base-element-sm {
        @include buttons-element(transparent, darken($color-green, 4%), 9px 11px);
    }

    .btn-base-element-md {
        @include buttons-element(transparent, darken($color-green, 4%), 12px 13px);
    }

    .btn-base-element-lg {
        @include buttons-element(transparent, darken($color-green, 4%), 15px 15px);
    }
}

/* Button Red Color */
.btn-red-brd {
    @include buttons($color-red, $color-white, transparent, $color-red, 1px, $color-red, $color-red, transparent);

    .btn-base-element-xs {
        @include buttons-element(transparent, darken($color-red, 4%), 6px 9px);
    }

    .btn-base-element-sm {
        @include buttons-element(transparent, darken($color-red, 4%), 9px 11px);
    }

    .btn-base-element-md {
        @include buttons-element(transparent, darken($color-red, 4%), 12px 13px);
    }

    .btn-base-element-lg {
        @include buttons-element(transparent, darken($color-red, 4%), 15px 15px);
    }
}

/* Button Pink Color */
.btn-pink-brd {
    @include buttons($color-pink, $color-white, transparent, $color-pink, 1px, $color-pink, $color-pink, transparent);

    .btn-base-element-xs {
        @include buttons-element(transparent, darken($color-pink, 4%), 6px 9px);
    }

    .btn-base-element-sm {
        @include buttons-element(transparent, darken($color-pink, 4%), 9px 11px);
    }

    .btn-base-element-md {
        @include buttons-element(transparent, darken($color-pink, 4%), 12px 13px);
    }

    .btn-base-element-lg {
        @include buttons-element(transparent, darken($color-pink, 4%), 15px 15px);
    }
}

/* Button Purple Color */
.btn-purple-brd {
    @include buttons($color-purple, $color-white, transparent, $color-purple, 1px, $color-purple, $color-purple, transparent);

    .btn-base-element-xs {
        @include buttons-element(transparent, darken($color-purple, 4%), 6px 9px);
    }

    .btn-base-element-sm {
        @include buttons-element(transparent, darken($color-purple, 4%), 9px 11px);
    }

    .btn-base-element-md {
        @include buttons-element(transparent, darken($color-purple, 4%), 12px 13px);
    }

    .btn-base-element-lg {
        @include buttons-element(transparent, darken($color-purple, 4%), 15px 15px);
    }
}

/* Button Gold Color */
.btn-gold-brd {
    @include buttons($color-gold, $color-white, transparent, $color-gold, 1px, $color-gold, $color-gold, transparent);

    .btn-base-element-xs {
        @include buttons-element(transparent, darken($color-gold, 4%), 6px 9px);
    }

    .btn-base-element-sm {
        @include buttons-element(transparent, darken($color-gold, 4%), 9px 11px);
    }

    .btn-base-element-md {
        @include buttons-element(transparent, darken($color-gold, 4%), 12px 13px);
    }

    .btn-base-element-lg {
        @include buttons-element(transparent, darken($color-gold, 4%), 15px 15px);
    }
}

/* Facebook */
.btn-fb-brd {
    @include buttons($color-fb, $color-white, transparent, $color-fb, 1px, $color-fb, $color-fb, transparent);

    .btn-base-element-xs {
        @include buttons-element(transparent, darken($color-fb, 4%), 6px 9px);
    }

    .btn-base-element-sm {
        @include buttons-element(transparent, darken($color-fb, 4%), 9px 11px);
    }

    .btn-base-element-md {
        @include buttons-element(transparent, darken($color-fb, 4%), 12px 13px);
    }

    .btn-base-element-lg {
        @include buttons-element(transparent, darken($color-fb, 4%), 15px 15px);
    }
}

/* Twitter */
.btn-tw-brd {
    @include buttons($color-tw, $color-white, transparent, $color-tw, 1px, $color-tw, $color-tw, transparent);

    .btn-base-element-xs {
        @include buttons-element(transparent, darken($color-tw, 4%), 6px 9px);
    }

    .btn-base-element-sm {
        @include buttons-element(transparent, darken($color-tw, 4%), 9px 11px);
    }

    .btn-base-element-md {
        @include buttons-element(transparent, darken($color-tw, 4%), 12px 13px);
    }

    .btn-base-element-lg {
        @include buttons-element(transparent, darken($color-tw, 4%), 15px 15px);
    }
}

/* Dribbble */
.btn-dr-brd {
    @include buttons($color-dr, $color-white, transparent, $color-dr, 1px, $color-dr, $color-dr, transparent);

    .btn-base-element-xs {
        @include buttons-element(transparent, darken($color-dr, 4%), 6px 9px);
    }

    .btn-base-element-sm {
        @include buttons-element(transparent, darken($color-dr, 4%), 9px 11px);
    }

    .btn-base-element-md {
        @include buttons-element(transparent, darken($color-dr, 4%), 12px 13px);
    }

    .btn-base-element-lg {
        @include buttons-element(transparent, darken($color-dr, 4%), 15px 15px);
    }
}

/* Instagram */
.btn-ig-brd {
    @include buttons($color-ig, $color-white, transparent, $color-ig, 1px, $color-ig, $color-ig, transparent);

    .btn-base-element-xs {
        @include buttons-element(transparent, darken($color-ig, 4%), 6px 9px);
    }

    .btn-base-element-sm {
        @include buttons-element(transparent, darken($color-ig, 4%), 9px 11px);
    }

    .btn-base-element-md {
        @include buttons-element(transparent, darken($color-ig, 4%), 12px 13px);
    }

    .btn-base-element-lg {
        @include buttons-element(transparent, darken($color-ig, 4%), 15px 15px);
    }
}

/*--------------------------------------------------
    [Buttons Slide]
----------------------------------------------------*/

/* Button Slide */
.btn-slide {
    position: relative;
    z-index: 1;
    overflow: hidden;

    &:after {
        z-index: -1;
        @include transition(all, .3s ease);
        content: '';
    }
}

/* Button Slide Top */
.btn-slide-top {
    &:after {
        @include position(absolute, $top: 0, $left: 0);
        @include size(100%, 0);
    }

    &:hover,
    &:focus,
    &:active {
        &:after {
            height: 100%;
        }
    }
}

/* Button Slide Right */
.btn-slide-right {
    &:after {
        @include position(absolute, $top: 0, $right: 0);
        @include size(0, 100%);
    }

    &:hover,
    &:focus,
    &:active {
        &:after {
            width: 100%;
        }
    }
}

/* Button Slide Bottom */
.btn-slide-bottom {
    &:after {
        @include position(absolute, $left: 0, $bottom: 0);
        @include size(100%, 0%);
    }

    &:hover,
    &:focus,
    &:active {
        &:after {
            height: 100%;
        }
    }
}

/* Button Slide Left */
.btn-slide-left {
    &:after {
        @include position(absolute, $top: 0, $left: 0);
        @include size(0, 100%);
    }

    &:hover,
    &:focus,
    &:active {
        &:after {
            width: 100%;
        }
    }
}

/* Button Slide Corner */
.btn-slide-corner {
    overflow: hidden;

    &:after {
        @include position(absolute, $top: 50%, $left: 50%);
        @include size(100%, 0);
        opacity: 0;
        -webkit-transform: translateX(-50%) translateY(-50%) rotate(45deg);
        -moz-transform: translateX(-50%) translateY(-50%) rotate(45deg);
        -ms-transform: translateX(-50%) translateY(-50%) rotate(45deg);
        transform: translateX(-50%) translateY(-50%) rotate(45deg);
    }

    &:hover,
    &:focus,
    &:active {
        &:after {
            height: 160%;
            opacity: 1;
        }
    }

    &:active {
        &:after {
            height: 200%;
        }
    }
}

/* Button Slide Center v1 */
.btn-slide-center-v1 {
    overflow: hidden;

    &:after {
        @include position(absolute, $top: 50%, $left: 50%);
        @include size(0, 103%);
        opacity: 0;
        -webkit-transform: translateX(-50%) translateY(-50%);
        -moz-transform: translateX(-50%) translateY(-50%);
        -ms-transform: translateX(-50%) translateY(-50%);
        transform: translateX(-50%) translateY(-50%);
    }

    &:hover,
    &:focus,
    &:active {
        &:after {
            opacity: 1;
            width: 101%;
        }
    }

    &:active {
        &:after {
            width: 101%;
        }
    }
}

/* Button Slide Center v2 */
.btn-slide-center-v2 {
    overflow: hidden;

    &:after {
        @include position(absolute, $top: 50%, $left: 50%);
        @include size(0, 103%);
        opacity: 0;
        -webkit-transform: translateX(-50%) translateY(-50%);
        -moz-transform: translateX(-50%) translateY(-50%);
        -ms-transform: translateX(-50%) translateY(-50%);
        transform: translateX(-50%) translateY(-50%);
    }

    &:hover,
    &:focus,
    &:active {
        &:after {
            opacity: 1;
            width: 90%;
        }
    }

    &:active {
        &:after {
            width: 101%;
        }
    }
}

/* Button Slide Center v3 */
.btn-slide-center-v3 {
    overflow: hidden;

    &:after {
        @include position(absolute, $top: 50%, $left: 50%);
        @include size(101%, 0);
        opacity: 0;
        -webkit-transform: translateX(-50%) translateY(-50%);
        -moz-transform: translateX(-50%) translateY(-50%);
        -ms-transform: translateX(-50%) translateY(-50%);
        transform: translateX(-50%) translateY(-50%);
    }

    &:hover,
    &:focus,
    &:active {
        &:after {
            height: 75%;
            opacity: 1;
        }
    }

    &:active {
        &:after {
            height: 130%;
        }
    }
}

/*------------------------------------------------------------------
    [Animate Buttons Wrap]
------------------------------------------------------------------*/

/* Animate Button Wrap */
.animate-btn-wrap {
    overflow: hidden;

    .btn-icon {
        color: $color-white;
    }

    .btn-text {
        top: 0;
    }

    .btn-icon,
    .btn-text {
        display: block;
        position: relative;
        @include transition(all, .3s ease);
        z-index: 1;
    }
}

/*------------------------------------------------------------------
    [Animate Buttons Top]
------------------------------------------------------------------*/

/* Animate Mini Button Top */
.animate-btn-t-xs {
    &:hover {
        .btn-text{
            top: -45px;
        }
    }

    .btn-icon {
        bottom: -45px;
    }

    &:hover {
        .btn-icon {
            bottom: 18px;
        }
    }
}

/* Animate Small Button Top */
.animate-btn-t-sm {
    &:hover {
        .btn-text{
            top: -45px;
        }
    }

    .btn-icon {
        bottom: -45px;
    }

    &:hover {
        .btn-icon {
            bottom: 18px;
        }
    }
}

/* Animate Medium Button Top */
.animate-btn-t-md {
    &:hover {
        .btn-text{
            top: -55px;
        }
    }

    .btn-icon {
        bottom: -55px;
    }

    &:hover {
        .btn-icon {
            bottom: 20px;
        }
    }
}

/* Animate Large Button Top */
.animate-btn-t-lg {
    &:hover {
        .btn-text{
            top: -70px;
        }
    }

    .btn-icon {
        bottom: -70px;
    }

    &:hover {
        .btn-icon {
            bottom: 28px;
        }
    }
}

/*------------------------------------------------------------------
    [Animate Buttons Bottom]
------------------------------------------------------------------*/

/* Animate Mini Button Bottom */
.animate-btn-b-xs {
    &:hover {
        .btn-text{
            top: 45px;
        }
    }

    .btn-icon {
        top: -45px;
    }

    &:hover {
        .btn-icon {
            top: -20px;
        }
    }
}

/* Animate Small Button Bottom */
.animate-btn-b-sm {
    &:hover {
        .btn-text{
            top: 45px;
        }
    }

    .btn-icon {
        top: -45px;
    }

    &:hover {
        .btn-icon {
            top: -18px;
        }
    }
}

/* Animate Medium Button Bottom */
.animate-btn-b-md {
    &:hover {
        .btn-text{
            top: 55px;
        }
    }

    .btn-icon {
        top: -55px;
    }

    &:hover {
        .btn-icon {
            top: -20px;
        }
    }
}

/* Animate Large Button Bottom */
.animate-btn-b-lg {
    &:hover {
        .btn-text{
            top: 70px;
        }
    }

    .btn-icon {
        top: -70px;
    }

    &:hover {
        .btn-icon {
            top: -28px;
        }
    }
}

/*------------------------------------------------------------------
    [Animate Buttons Right]
------------------------------------------------------------------*/

/* Animate Button Right */
.animate-btn-r-xs,
.animate-btn-r-sm,
.animate-btn-r-md,
.animate-btn-r-lg {
    .btn-text {
        right: 0;
    }

    &:hover {
        .btn-text{
            right: -90px;
            opacity: 0;
        }
    }

    .btn-icon {
        top: -20px;
        left: -90px;
        opacity: 0;
    }

    &:hover {
        .btn-icon {
            left: 0;
            opacity: 1;
        }
    }
}

/* Animate Large Button Right */
.animate-btn-r-lg {
    .btn-icon {
        top: -28px;
    }
}

/*------------------------------------------------------------------
    [Animate Buttons Left]
------------------------------------------------------------------*/

/* Animate Button Left */
.animate-btn-l-xs,
.animate-btn-l-sm,
.animate-btn-l-md,
.animate-btn-l-lg {
    .btn-text {
        left: 0;
    }

    &:hover {
        .btn-text{
            left: -90px;
            opacity: 0;
        }
    }

    .btn-icon {
        top: -20px;
        right: -90px;
        opacity: 0;
    }

    &:hover {
        .btn-icon {
            right: 0;
            opacity: 1;
        }
    }
}

/* Animate Large Button Left */
.animate-btn-l-lg {
    .btn-icon {
        top: -28px;
    }
}


/* Animate Button Backgound Hover Effect */
.animate-btn-bg-hover {
    &:hover {
        &:after,
        &:before {
            @include size(100%, 50%);
        }
    }

    &:before,
    &:after {
        position: absolute;
        @include size(0);
        @include transition(all, .5s ease);
        content: "";
    }

    &:before {
        left: 0;
        bottom: 0;
    }

    &:after {
        right: 0;
        top: 0;
    }
}

/*------------------------------------------------------------------
    [Animate Buttons Sizes]
------------------------------------------------------------------*/

/* Mini Size */
.animate-btn-base-xs {
    height: 35px;
    @include font($font-size-14, $font-weight-300);
    padding: 8px 15px;
}

/* Small Size */
.animate-btn-base-sm {
    height: 40px;
    @include font($font-size-14, $font-weight-300);
    padding: 9px 22px;
}

/* Medium Size */
.animate-btn-base-md {
    height: 50px;
    @include font($font-size-16, $font-weight-300);
    padding: 12px 25px;
}

/* Large Size */
.animate-btn-base-lg {
    height: 60px;
    @include font($font-size-20, $font-weight-300);
    padding: 15px 30px;
}

/*--------------------------------------------------
    [Buttons Border Slide]
----------------------------------------------------*/

/* Button Base Color Slide */
.btn-base-brd-slide {
    @include buttons($color-base, $color-white, transparent, transparent, 1px, $color-base, $color-base, $color-base);

    .btn-base-element-xs {
        @include buttons-element(transparent, darken($color-base, 4%), 6px 9px);
    }

    .btn-base-element-sm {
        @include buttons-element(transparent, darken($color-base, 4%), 9px 11px);
    }

    .btn-base-element-md {
        @include buttons-element(transparent, darken($color-base, 4%), 12px 13px);
    }

    .btn-base-element-lg {
        @include buttons-element(transparent, darken($color-base, 4%), 15px 15px);
    }
}

/* Button White Color Slide */
.btn-white-brd-slide {
    @include buttons($color-white, $color-dark, transparent, transparent, 1px, $color-white, $color-white, $color-white);

    .btn-base-element-xs {
        @include buttons-element(transparent, darken($color-white, 6%), 6px 9px);
    }

    .btn-base-element-sm {
        @include buttons-element(transparent, darken($color-white, 6%), 9px 11px);
    }

    .btn-base-element-md {
        @include buttons-element(transparent, darken($color-white, 6%), 12px 13px);
    }

    .btn-base-element-lg {
        @include buttons-element(transparent, darken($color-white, 6%), 15px 15px);
    }
}

/* Button Dark Color Slide */
.btn-dark-brd-slide {
    @include buttons($color-dark, $color-white, transparent, transparent, 1px, $color-dark, $color-dark, $color-dark);

    .btn-base-element-xs {
        @include buttons-element(transparent, darken($color-dark, 4%), 6px 9px);
    }

    .btn-base-element-sm {
        @include buttons-element(transparent, darken($color-dark, 4%), 9px 11px);
    }

    .btn-base-element-md {
        @include buttons-element(transparent, darken($color-dark, 4%), 12px 13px);
    }

    .btn-base-element-lg {
        @include buttons-element(transparent, darken($color-dark, 4%), 15px 15px);
    }
}

/* Button Grey Color Slide */
.btn-grey-brd-slide {
    @include buttons($color-grey, $color-white, transparent, transparent, 1px, $color-grey, $color-grey, $color-grey);

    .btn-base-element-xs {
        @include buttons-element(transparent, darken($color-grey, 4%), 6px 9px);
    }

    .btn-base-element-sm {
        @include buttons-element(transparent, darken($color-grey, 4%), 9px 11px);
    }

    .btn-base-element-md {
        @include buttons-element(transparent, darken($color-grey, 4%), 12px 13px);
    }

    .btn-base-element-lg {
        @include buttons-element(transparent, darken($color-grey, 4%), 15px 15px);
    }
}

/* Button Blue Grey Color Slide */
.btn-blue-grey-brd-slide {
    @include buttons($color-blue-grey, $color-white, transparent, transparent, 1px, $color-blue-grey, $color-blue-grey, $color-blue-grey);

    .btn-base-element-xs {
        @include buttons-element(transparent, darken($color-blue-grey, 4%), 6px 9px);
    }

    .btn-base-element-sm {
        @include buttons-element(transparent, darken($color-blue-grey, 4%), 9px 11px);
    }

    .btn-base-element-md {
        @include buttons-element(transparent, darken($color-blue-grey, 4%), 12px 13px);
    }

    .btn-base-element-lg {
        @include buttons-element(transparent, darken($color-blue-grey, 4%), 15px 15px);
    }
}

/* Button Blue Color Slide */
.btn-blue-brd-slide {
    @include buttons($color-blue, $color-white, transparent, transparent, 1px, $color-blue, $color-blue, $color-blue);

    .btn-base-element-xs {
        @include buttons-element(transparent, darken($color-blue, 4%), 6px 9px);
    }

    .btn-base-element-sm {
        @include buttons-element(transparent, darken($color-blue, 4%), 9px 11px);
    }

    .btn-base-element-md {
        @include buttons-element(transparent, darken($color-blue, 4%), 12px 13px);
    }

    .btn-base-element-lg {
        @include buttons-element(transparent, darken($color-blue, 4%), 15px 15px);
    }
}

/* Button Teal Color Slide */
.btn-teal-brd-slide {
    @include buttons($color-teal, $color-white, transparent, transparent, 1px, $color-teal, $color-teal, $color-teal);

    .btn-base-element-xs {
        @include buttons-element(transparent, darken($color-teal, 4%), 6px 9px);
    }

    .btn-base-element-sm {
        @include buttons-element(transparent, darken($color-teal, 4%), 9px 11px);
    }

    .btn-base-element-md {
        @include buttons-element(transparent, darken($color-teal, 4%), 12px 13px);
    }

    .btn-base-element-lg {
        @include buttons-element(transparent, darken($color-teal, 4%), 15px 15px);
    }
}

/* Button Green Color Slide */
.btn-green-brd-slide {
    @include buttons($color-green, $color-white, transparent, transparent, 1px, $color-green, $color-green, $color-green);

    .btn-base-element-xs {
        @include buttons-element(transparent, darken($color-green, 4%), 6px 9px);
    }

    .btn-base-element-sm {
        @include buttons-element(transparent, darken($color-green, 4%), 9px 11px);
    }

    .btn-base-element-md {
        @include buttons-element(transparent, darken($color-green, 4%), 12px 13px);
    }

    .btn-base-element-lg {
        @include buttons-element(transparent, darken($color-green, 4%), 15px 15px);
    }
}

/* Button Red Color Slide */
.btn-red-brd-slide {
    @include buttons($color-red, $color-white, transparent, transparent, 1px, $color-red, $color-red, $color-red);

    .btn-base-element-xs {
        @include buttons-element(transparent, darken($color-red, 4%), 6px 9px);
    }

    .btn-base-element-sm {
        @include buttons-element(transparent, darken($color-red, 4%), 9px 11px);
    }

    .btn-base-element-md {
        @include buttons-element(transparent, darken($color-red, 4%), 12px 13px);
    }

    .btn-base-element-lg {
        @include buttons-element(transparent, darken($color-red, 4%), 15px 15px);
    }
}

/* Button Pink Color Slide */
.btn-pink-brd-slide {
    @include buttons($color-pink, $color-white, transparent, transparent, 1px, $color-pink, $color-pink, $color-pink);

    .btn-base-element-xs {
        @include buttons-element(transparent, darken($color-pink, 4%), 6px 9px);
    }

    .btn-base-element-sm {
        @include buttons-element(transparent, darken($color-pink, 4%), 9px 11px);
    }

    .btn-base-element-md {
        @include buttons-element(transparent, darken($color-pink, 4%), 12px 13px);
    }

    .btn-base-element-lg {
        @include buttons-element(transparent, darken($color-pink, 4%), 15px 15px);
    }
}

/* Button Purple Color Slide */
.btn-purple-brd-slide {
    @include buttons($color-purple, $color-white, transparent, transparent, 1px, $color-purple, $color-purple, $color-purple);

    .btn-base-element-xs {
        @include buttons-element(transparent, darken($color-purple, 4%), 6px 9px);
    }

    .btn-base-element-sm {
        @include buttons-element(transparent, darken($color-purple, 4%), 9px 11px);
    }

    .btn-base-element-md {
        @include buttons-element(transparent, darken($color-purple, 4%), 12px 13px);
    }

    .btn-base-element-lg {
        @include buttons-element(transparent, darken($color-purple, 4%), 15px 15px);
    }
}

/* Button Gold Color Slide */
.btn-gold-brd-slide {
    @include buttons($color-gold, $color-white, transparent, transparent, 1px, $color-gold, $color-gold, $color-gold);

    .btn-base-element-xs {
        @include buttons-element(transparent, darken($color-gold, 4%), 6px 9px);
    }

    .btn-base-element-sm {
        @include buttons-element(transparent, darken($color-gold, 4%), 9px 11px);
    }

    .btn-base-element-md {
        @include buttons-element(transparent, darken($color-gold, 4%), 12px 13px);
    }

    .btn-base-element-lg {
        @include buttons-element(transparent, darken($color-gold, 4%), 15px 15px);
    }
}

/* Button Facebook Color Slide */
.btn-fb-brd-slide {
    @include buttons($color-fb, $color-white, transparent, transparent, 1px, $color-fb, $color-fb, $color-fb);

    .btn-base-element-xs {
        @include buttons-element(transparent, darken($color-fb, 4%), 6px 9px);
    }

    .btn-base-element-sm {
        @include buttons-element(transparent, darken($color-fb, 4%), 9px 11px);
    }

    .btn-base-element-md {
        @include buttons-element(transparent, darken($color-fb, 4%), 12px 13px);
    }

    .btn-base-element-lg {
        @include buttons-element(transparent, darken($color-fb, 4%), 15px 15px);
    }
}

/* Button Twitter Color Slide */
.btn-tw-brd-slide {
    @include buttons($color-tw, $color-white, transparent, transparent, 1px, $color-tw, $color-tw, $color-tw);

    .btn-base-element-xs {
        @include buttons-element(transparent, darken($color-tw, 4%), 6px 9px);
    }

    .btn-base-element-sm {
        @include buttons-element(transparent, darken($color-tw, 4%), 9px 11px);
    }

    .btn-base-element-md {
        @include buttons-element(transparent, darken($color-tw, 4%), 12px 13px);
    }

    .btn-base-element-lg {
        @include buttons-element(transparent, darken($color-tw, 4%), 15px 15px);
    }
}

/* Button Dribbble Color Slide */
.btn-dr-brd-slide {
    @include buttons($color-dr, $color-white, transparent, transparent, 1px, $color-dr, $color-dr, $color-dr);

    .btn-base-element-xs {
        @include buttons-element(transparent, darken($color-dr, 4%), 6px 9px);
    }

    .btn-base-element-sm {
        @include buttons-element(transparent, darken($color-dr, 4%), 9px 11px);
    }

    .btn-base-element-md {
        @include buttons-element(transparent, darken($color-dr, 4%), 12px 13px);
    }

    .btn-base-element-lg {
        @include buttons-element(transparent, darken($color-dr, 4%), 15px 15px);
    }
}

/* Button Instagram Color Slide */
.btn-ig-brd-slide {
    @include buttons($color-ig, $color-white, transparent, transparent, 1px, $color-ig, $color-ig, $color-ig);

    .btn-base-element-xs {
        @include buttons-element(transparent, darken($color-ig, 4%), 6px 9px);
    }

    .btn-base-element-sm {
        @include buttons-element(transparent, darken($color-ig, 4%), 9px 11px);
    }

    .btn-base-element-md {
        @include buttons-element(transparent, darken($color-ig, 4%), 12px 13px);
    }

    .btn-base-element-lg {
        @include buttons-element(transparent, darken($color-ig, 4%), 15px 15px);
    }
}

/*--------------------------------------------------
    [Buttons Background Slide]
----------------------------------------------------*/

/* Button Base Color Slide */
.btn-base-bg-slide {
    @include buttons($color-white, $color-white, $color-base, $color-base, 0, tranparent, tranparent, $color-base-light);

    .btn-base-element-xs {
        @include buttons-element(transparent, darken($color-base, 4%), 6px 9px);
    }

    .btn-base-element-sm {
        @include buttons-element(transparent, darken($color-base, 4%), 9px 11px);
    }

    .btn-base-element-md {
        @include buttons-element(transparent, darken($color-base, 4%), 12px 13px);
    }

    .btn-base-element-lg {
        @include buttons-element(transparent, darken($color-base, 4%), 15px 15px);
    }
}

/* Button White Color Slide */
.btn-white-bg-slide {
    @include buttons($color-dark, $color-white, $color-white, $color-white, 0, transparent, transparent, $color-base);

    .btn-base-element-xs {
        @include buttons-element(transparent, darken($color-white, 6%), 6px 9px);
    }

    .btn-base-element-sm {
        @include buttons-element(transparent, darken($color-white, 6%), 9px 11px);
    }

    .btn-base-element-md {
        @include buttons-element(transparent, darken($color-white, 6%), 12px 13px);
    }

    .btn-base-element-lg {
        @include buttons-element(transparent, darken($color-white, 6%), 15px 15px);
    }
}

/* Button Dark Color Slide */
.btn-dark-bg-slide {
    @include buttons($color-white, $color-white, $color-dark, $color-dark, 0, transparent, transparent, $color-dark-light);

    .btn-base-element-xs {
        @include buttons-element(transparent, darken($color-dark, 4%), 6px 9px);
    }

    .btn-base-element-sm {
        @include buttons-element(transparent, darken($color-dark, 4%), 9px 11px);
    }

    .btn-base-element-md {
        @include buttons-element(transparent, darken($color-dark, 4%), 12px 13px);
    }

    .btn-base-element-lg {
        @include buttons-element(transparent, darken($color-dark, 4%), 15px 15px);
    }
}

/* Button Grey Color Slide */
.btn-grey-bg-slide {
    @include buttons($color-white, $color-white, $color-grey, $color-grey, 0, transparent, transparent, $color-grey-light);

    .btn-base-element-xs {
        @include buttons-element(transparent, darken($color-grey, 4%), 6px 9px);
    }

    .btn-base-element-sm {
        @include buttons-element(transparent, darken($color-grey, 4%), 9px 11px);
    }

    .btn-base-element-md {
        @include buttons-element(transparent, darken($color-grey, 4%), 12px 13px);
    }

    .btn-base-element-lg {
        @include buttons-element(transparent, darken($color-grey, 4%), 15px 15px);
    }
}

/* Button Blue Grey Color Slide */
.btn-blue-grey-bg-slide {
    @include buttons($color-white, $color-white, $color-blue-grey, $color-blue-grey, 0, transparent, transparent, $color-blue-grey-light);

    .btn-base-element-xs {
        @include buttons-element(transparent, darken($color-blue-grey, 4%), 6px 9px);
    }

    .btn-base-element-sm {
        @include buttons-element(transparent, darken($color-blue-grey, 4%), 9px 11px);
    }

    .btn-base-element-md {
        @include buttons-element(transparent, darken($color-blue-grey, 4%), 12px 13px);
    }

    .btn-base-element-lg {
        @include buttons-element(transparent, darken($color-blue-grey, 4%), 15px 15px);
    }
}

/* Button Blue Color Slide */
.btn-blue-bg-slide {
    @include buttons($color-white, $color-white, $color-blue, $color-blue, 0, transparent, transparent, $color-blue-light);

    .btn-base-element-xs {
        @include buttons-element(transparent, darken($color-blue, 4%), 6px 9px);
    }

    .btn-base-element-sm {
        @include buttons-element(transparent, darken($color-blue, 4%), 9px 11px);
    }

    .btn-base-element-md {
        @include buttons-element(transparent, darken($color-blue, 4%), 12px 13px);
    }

    .btn-base-element-lg {
        @include buttons-element(transparent, darken($color-blue, 4%), 15px 15px);
    }
}

/* Button Teal Color Slide */
.btn-teal-bg-slide {
    @include buttons($color-white, $color-white, $color-teal, $color-teal, 0, transparent, transparent, $color-teal-light);

    .btn-base-element-xs {
        @include buttons-element(transparent, darken($color-teal, 4%), 6px 9px);
    }

    .btn-base-element-sm {
        @include buttons-element(transparent, darken($color-teal, 4%), 9px 11px);
    }

    .btn-base-element-md {
        @include buttons-element(transparent, darken($color-teal, 4%), 12px 13px);
    }

    .btn-base-element-lg {
        @include buttons-element(transparent, darken($color-teal, 4%), 15px 15px);
    }
}

/* Button Green Color Slide */
.btn-green-bg-slide {
    @include buttons($color-white, $color-white, $color-green, $color-green, 0, transparent, transparent, $color-green-light);

    .btn-base-element-xs {
        @include buttons-element(transparent, darken($color-green, 4%), 6px 9px);
    }

    .btn-base-element-sm {
        @include buttons-element(transparent, darken($color-green, 4%), 9px 11px);
    }

    .btn-base-element-md {
        @include buttons-element(transparent, darken($color-green, 4%), 12px 13px);
    }

    .btn-base-element-lg {
        @include buttons-element(transparent, darken($color-green, 4%), 15px 15px);
    }
}

/* Button Red Color Slide */
.btn-red-bg-slide {
    @include buttons($color-white, $color-white, $color-red, $color-red, 0, transparent, transparent, $color-red-light);

    .btn-base-element-xs {
        @include buttons-element(transparent, darken($color-red, 4%), 6px 9px);
    }

    .btn-base-element-sm {
        @include buttons-element(transparent, darken($color-red, 4%), 9px 11px);
    }

    .btn-base-element-md {
        @include buttons-element(transparent, darken($color-red, 4%), 12px 13px);
    }

    .btn-base-element-lg {
        @include buttons-element(transparent, darken($color-red, 4%), 15px 15px);
    }
}

/* Button Pink Color Slide */
.btn-pink-bg-slide {
    @include buttons($color-white, $color-white, $color-pink, $color-pink, 0, transparent, transparent, $color-pink-light);

    .btn-base-element-xs {
        @include buttons-element(transparent, darken($color-pink, 4%), 6px 9px);
    }

    .btn-base-element-sm {
        @include buttons-element(transparent, darken($color-pink, 4%), 9px 11px);
    }

    .btn-base-element-md {
        @include buttons-element(transparent, darken($color-pink, 4%), 12px 13px);
    }

    .btn-base-element-lg {
        @include buttons-element(transparent, darken($color-pink, 4%), 15px 15px);
    }
}

/* Button Purple Color Slide */
.btn-purple-bg-slide {
    @include buttons($color-white, $color-white, $color-purple, $color-purple, 0, transparent, transparent, $color-purple-light);

    .btn-base-element-xs {
        @include buttons-element(transparent, darken($color-purple, 4%), 6px 9px);
    }

    .btn-base-element-sm {
        @include buttons-element(transparent, darken($color-purple, 4%), 9px 11px);
    }

    .btn-base-element-md {
        @include buttons-element(transparent, darken($color-purple, 4%), 12px 13px);
    }

    .btn-base-element-lg {
        @include buttons-element(transparent, darken($color-purple, 4%), 15px 15px);
    }
}

/* Button Gold Color Slide */
.btn-gold-bg-slide {
    @include buttons($color-white, $color-white, $color-gold, $color-gold, 0, transparent, transparent, $color-gold-light);

    .btn-base-element-xs {
        @include buttons-element(transparent, darken($color-gold, 4%), 6px 9px);
    }

    .btn-base-element-sm {
        @include buttons-element(transparent, darken($color-gold, 4%), 9px 11px);
    }

    .btn-base-element-md {
        @include buttons-element(transparent, darken($color-gold, 4%), 12px 13px);
    }

    .btn-base-element-lg {
        @include buttons-element(transparent, darken($color-gold, 4%), 15px 15px);
    }
}

/* Button Facebook Color Slide */
.btn-fb-bg-slide {
    @include buttons($color-white, $color-white, $color-fb, $color-fb, 0, transparent, transparent, $color-fb);

    .btn-base-element-xs {
        @include buttons-element(transparent, darken($color-fb, 4%), 6px 9px);
    }

    .btn-base-element-sm {
        @include buttons-element(transparent, darken($color-fb, 4%), 9px 11px);
    }

    .btn-base-element-md {
        @include buttons-element(transparent, darken($color-fb, 4%), 12px 13px);
    }

    .btn-base-element-lg {
        @include buttons-element(transparent, darken($color-fb, 4%), 15px 15px);
    }
}

/* Button Twitter Color Slide */
.btn-tw-bg-slide {
    @include buttons($color-white, $color-white, $color-tw, $color-tw, 0, transparent, transparent, $color-tw);

    .btn-base-element-xs {
        @include buttons-element(transparent, darken($color-tw, 4%), 6px 9px);
    }

    .btn-base-element-sm {
        @include buttons-element(transparent, darken($color-tw, 4%), 9px 11px);
    }

    .btn-base-element-md {
        @include buttons-element(transparent, darken($color-tw, 4%), 12px 13px);
    }

    .btn-base-element-lg {
        @include buttons-element(transparent, darken($color-tw, 4%), 15px 15px);
    }
}

/* Button Dribbble Color Slide */
.btn-dr-bg-slide {
    @include buttons($color-white, $color-white, $color-dr, $color-dr, 0, transparent, transparent, $color-dr);

    .btn-base-element-xs {
        @include buttons-element(transparent, darken($color-dr, 4%), 6px 9px);
    }

    .btn-base-element-sm {
        @include buttons-element(transparent, darken($color-dr, 4%), 9px 11px);
    }

    .btn-base-element-md {
        @include buttons-element(transparent, darken($color-dr, 4%), 12px 13px);
    }

    .btn-base-element-lg {
        @include buttons-element(transparent, darken($color-dr, 4%), 15px 15px);
    }
}

/* Button Instagram Color Slide */
.btn-ig-bg-slide {
    @include buttons($color-white, $color-white, $color-ig, $color-ig, 0, transparent, transparent, $color-ig);

    .btn-base-element-xs {
        @include buttons-element(transparent, darken($color-ig, 4%), 6px 9px);
    }

    .btn-base-element-sm {
        @include buttons-element(transparent, darken($color-ig, 4%), 9px 11px);
    }

    .btn-base-element-md {
        @include buttons-element(transparent, darken($color-ig, 4%), 12px 13px);
    }

    .btn-base-element-lg {
        @include buttons-element(transparent, darken($color-ig, 4%), 15px 15px);
    }
}


/*--------------------------------------------------
    [Buttons Background Color Hover Animate]
----------------------------------------------------*/

/* Button Background Base Color */
.btn-base-bg-anim {
    @include buttons($color-white, $color-white, $color-base, $color-base, 0, transparent, transparent, darken($color-base, 5%));

    .btn-base-element-xs {
        @include buttons-element(darken($color-base, 4%), transparent, 6px 9px);
    }

    .btn-base-element-sm {
        @include buttons-element(darken($color-base, 4%), transparent, 9px 11px);
    }

    .btn-base-element-md {
        @include buttons-element(darken($color-base, 4%), transparent, 12px 13px);
    }

    .btn-base-element-lg {
        @include buttons-element(darken($color-base, 4%), transparent, 15px 15px);
    }
}

/* Button Background White Color */
.btn-white-bg-anim {
    @include buttons($color-dark, $color-white, $color-white, $color-white, 0, transparent, transparent, $color-base);

    .btn-base-element-xs {
        @include buttons-element(transparent, darken($color-white, 6%), 6px 9px);
    }

    .btn-base-element-sm {
        @include buttons-element(transparent, darken($color-white, 6%), 9px 11px);
    }

    .btn-base-element-md {
        @include buttons-element(transparent, darken($color-white, 6%), 12px 13px);
    }

    .btn-base-element-lg {
        @include buttons-element(transparent, darken($color-white, 6%), 15px 15px);
    }
}

/* Button Background Dark Color */
.btn-dark-bg-anim {
    @include buttons($color-white, $color-white, $color-dark, $color-dark, 0, transparent, transparent, darken($color-dark, 5%));

    .btn-base-element-xs {
        @include buttons-element(darken($color-dark, 4%), transparent, 6px 9px);
    }

    .btn-base-element-sm {
        @include buttons-element(darken($color-dark, 4%), transparent, 9px 11px);
    }

    .btn-base-element-md {
        @include buttons-element(darken($color-dark, 4%), transparent, 12px 13px);
    }

    .btn-base-element-lg {
        @include buttons-element(darken($color-dark, 4%), transparent, 15px 15px);
    }
}

/* Button Background Blue Grey Color */
.btn-blue-grey-bg-anim {
    @include buttons($color-white, $color-white, $color-blue-grey, $color-blue-grey-light, 0, transparent, transparent, darken($color-blue-grey, 5%));

    .btn-base-element-xs {
        @include buttons-element(darken($color-blue-grey, 4%), transparent, 6px 9px);
    }

    .btn-base-element-sm {
        @include buttons-element(darken($color-blue-grey, 4%), transparent, 9px 11px);
    }

    .btn-base-element-md {
        @include buttons-element(darken($color-blue-grey, 4%), transparent, 12px 13px);
    }

    .btn-base-element-lg {
        @include buttons-element(darken($color-blue-grey, 4%), transparent, 15px 15px);
    }
}

/* Button Background Grey Color */
.btn-grey-bg-anim {
    @include buttons($color-white, $color-white, $color-grey, lighten($color-grey, 7%), 0, transparent, transparent, darken($color-grey, 5%));

    .btn-base-element-xs {
        @include buttons-element(darken($color-grey, 4%), transparent, 6px 9px);
    }

    .btn-base-element-sm {
        @include buttons-element(darken($color-grey, 4%), transparent, 9px 11px);
    }

    .btn-base-element-md {
        @include buttons-element(darken($color-grey, 4%), transparent, 12px 13px);
    }

    .btn-base-element-lg {
        @include buttons-element(darken($color-grey, 4%), transparent, 15px 15px);
    }
}

/* Button Background Blue Color */
.btn-blue-bg-anim {
    @include buttons($color-white, $color-white, $color-blue, $color-blue-light, 0, transparent, transparent, darken($color-blue, 5%));

    .btn-base-element-xs {
        @include buttons-element(darken($color-blue, 4%), transparent, 6px 9px);
    }

    .btn-base-element-sm {
        @include buttons-element(darken($color-blue, 4%), transparent, 9px 11px);
    }

    .btn-base-element-md {
        @include buttons-element(darken($color-blue, 4%), transparent, 12px 13px);
    }

    .btn-base-element-lg {
        @include buttons-element(darken($color-blue, 4%), transparent, 15px 15px);
    }
}

/* Button Background Teal Color */
.btn-teal-bg-anim {
    @include buttons($color-white, $color-white, $color-teal, $color-teal-light, 0, transparent, transparent, darken($color-teal, 5%));

    .btn-base-element-xs {
        @include buttons-element(darken($color-teal, 4%), transparent, 6px 9px);
    }

    .btn-base-element-sm {
        @include buttons-element(darken($color-teal, 4%), transparent, 9px 11px);
    }

    .btn-base-element-md {
        @include buttons-element(darken($color-teal, 4%), transparent, 12px 13px);
    }

    .btn-base-element-lg {
        @include buttons-element(darken($color-teal, 4%), transparent, 15px 15px);
    }
}

/* Button Background Green Color */
.btn-green-bg-anim {
    @include buttons($color-white, $color-white, $color-green, $color-green-light, 0, transparent, transparent, darken($color-green, 5%));

    .btn-base-element-xs {
        @include buttons-element(darken($color-green, 4%), transparent, 6px 9px);
    }

    .btn-base-element-sm {
        @include buttons-element(darken($color-green, 4%), transparent, 9px 11px);
    }

    .btn-base-element-md {
        @include buttons-element(darken($color-green, 4%), transparent, 12px 13px);
    }

    .btn-base-element-lg {
        @include buttons-element(darken($color-green, 4%), transparent, 15px 15px);
    }
}

/* Button Background Red Color */
.btn-red-bg-anim {
    @include buttons($color-white, $color-white, $color-red, $color-red-light, 0, transparent, transparent, darken($color-red, 5%));

    .btn-base-element-xs {
        @include buttons-element(darken($color-red, 4%), transparent, 6px 9px);
    }

    .btn-base-element-sm {
        @include buttons-element(darken($color-red, 4%), transparent, 9px 11px);
    }

    .btn-base-element-md {
        @include buttons-element(darken($color-red, 4%), transparent, 12px 13px);
    }

    .btn-base-element-lg {
        @include buttons-element(darken($color-red, 4%), transparent, 15px 15px);
    }
}

/* Button Background Pink Color */
.btn-pink-bg-anim {
    @include buttons($color-white, $color-white, $color-pink, $color-pink-light, 0, transparent, transparent, darken($color-pink, 5%));

    .btn-base-element-xs {
        @include buttons-element(darken($color-pink, 4%), transparent, 6px 9px);
    }

    .btn-base-element-sm {
        @include buttons-element(darken($color-pink, 4%), transparent, 9px 11px);
    }

    .btn-base-element-md {
        @include buttons-element(darken($color-pink, 4%), transparent, 12px 13px);
    }

    .btn-base-element-lg {
        @include buttons-element(darken($color-pink, 4%), transparent, 15px 15px);
    }
}

/* Button Background Purple Color */
.btn-purple-bg-anim {
    @include buttons($color-white, $color-white, $color-purple, $color-purple-light, 0, transparent, transparent, darken($color-purple, 5%));

    .btn-base-element-xs {
        @include buttons-element(darken($color-purple, 4%), transparent, 6px 9px);
    }

    .btn-base-element-sm {
        @include buttons-element(darken($color-purple, 4%), transparent, 9px 11px);
    }

    .btn-base-element-md {
        @include buttons-element(darken($color-purple, 4%), transparent, 12px 13px);
    }

    .btn-base-element-lg {
        @include buttons-element(darken($color-purple, 4%), transparent, 15px 15px);
    }
}

/* Button Background Gold Color */
.btn-gold-bg-anim {
    @include buttons($color-white, $color-white, $color-gold, $color-gold-light, 0, transparent, transparent, darken($color-gold, 5%));

    .btn-base-element-xs {
        @include buttons-element(darken($color-gold, 4%), transparent, 6px 9px);
    }

    .btn-base-element-sm {
        @include buttons-element(darken($color-gold, 4%), transparent, 9px 11px);
    }

    .btn-base-element-md {
        @include buttons-element(darken($color-gold, 4%), transparent, 12px 13px);
    }

    .btn-base-element-lg {
        @include buttons-element(darken($color-gold, 4%), transparent, 15px 15px);
    }
}

/* Button Background Facebook */
.btn-fb-bg-anim {
    @include buttons($color-white, $color-white, $color-fb, $color-fb, 0, transparent, transparent, darken($color-fb, 5%));

    .btn-base-element-xs {
        @include buttons-element(darken($color-fb, 4%), transparent, 6px 9px);
    }

    .btn-base-element-sm {
        @include buttons-element(darken($color-fb, 4%), transparent, 9px 11px);
    }

    .btn-base-element-md {
        @include buttons-element(darken($color-fb, 4%), transparent, 12px 13px);
    }

    .btn-base-element-lg {
        @include buttons-element(darken($color-fb, 4%), transparent, 15px 15px);
    }
}

/* Button Background Twitter */
.btn-tw-bg-anim {
    @include buttons($color-white, $color-white, $color-tw, $color-tw, 0, transparent, transparent, darken($color-tw, 5%));

    .btn-base-element-xs {
        @include buttons-element(darken($color-tw, 4%), transparent, 6px 9px);
    }

    .btn-base-element-sm {
        @include buttons-element(darken($color-tw, 4%), transparent, 9px 11px);
    }

    .btn-base-element-md {
        @include buttons-element(darken($color-tw, 4%), transparent, 12px 13px);
    }

    .btn-base-element-lg {
        @include buttons-element(darken($color-tw, 4%), transparent, 15px 15px);
    }
}

/* Button Background Dribbble */
.btn-dr-bg-anim {
    @include buttons($color-white, $color-white, $color-dr, $color-dr, 0, transparent, transparent, darken($color-dr, 5%));

    .btn-base-element-xs {
        @include buttons-element(darken($color-dr, 4%), transparent, 6px 9px);
    }

    .btn-base-element-sm {
        @include buttons-element(darken($color-dr, 4%), transparent, 9px 11px);
    }

    .btn-base-element-md {
        @include buttons-element(darken($color-dr, 4%), transparent, 12px 13px);
    }

    .btn-base-element-lg {
        @include buttons-element(darken($color-dr, 4%), transparent, 15px 15px);
    }
}

/* Button Background Instagram */
.btn-ig-bg-anim {
    @include buttons($color-white, $color-white, $color-ig, $color-ig, 0, transparent, transparent, darken($color-ig, 5%));

    .btn-base-element-xs {
        @include buttons-element(darken($color-ig, 4%), transparent, 6px 9px);
    }

    .btn-base-element-sm {
        @include buttons-element(darken($color-ig, 4%), transparent, 9px 11px);
    }

    .btn-base-element-md {
        @include buttons-element(darken($color-ig, 4%), transparent, 12px 13px);
    }

    .btn-base-element-lg {
        @include buttons-element(darken($color-ig, 4%), transparent, 15px 15px);
    }
}


/*--------------------------------------------------
    [Buttons Border Color Hover Animate]
----------------------------------------------------*/

/* Button Border Base Color */
.btn-base-brd-anim {
    @include buttons($color-base, $color-white, transparent, transparent, 1px, $color-base, $color-base, $color-base);

    .btn-base-element-xs {
        @include buttons-element(darken($color-base, 4%), transparent, 6px 9px);
    }

    .btn-base-element-sm {
        @include buttons-element(darken($color-base, 4%), transparent, 9px 11px);
    }

    .btn-base-element-md {
        @include buttons-element(darken($color-base, 4%), transparent, 12px 13px);
    }

    .btn-base-element-lg {
        @include buttons-element(darken($color-base, 4%), transparent, 15px 15px);
    }
}

/* Button Border White Color */
.btn-white-brd-anim {
    @include buttons($color-white, $color-dark, transparent, transparent, 1px, $color-white, $color-white, $color-white);

    .btn-base-element-xs {
        @include buttons-element(transparent, darken($color-white, 6%), 6px 9px);
    }

    .btn-base-element-sm {
        @include buttons-element(transparent, darken($color-white, 6%), 9px 11px);
    }

    .btn-base-element-md {
        @include buttons-element(transparent, darken($color-white, 6%), 12px 13px);
    }

    .btn-base-element-lg {
        @include buttons-element(transparent, darken($color-white, 6%), 15px 15px);
    }
}

/* Button Border Dark Color */
.btn-dark-brd-anim {
    @include buttons($color-dark, $color-white, transparent, transparent, 1px, $color-dark, $color-dark, $color-dark);

    .btn-base-element-xs {
        @include buttons-element(darken($color-dark, 4%), transparent, 6px 9px);
    }

    .btn-base-element-sm {
        @include buttons-element(darken($color-dark, 4%), transparent, 9px 11px);
    }

    .btn-base-element-md {
        @include buttons-element(darken($color-dark, 4%), transparent, 12px 13px);
    }

    .btn-base-element-lg {
        @include buttons-element(darken($color-dark, 4%), transparent, 15px 15px);
    }
}

/* Button Border Blue Grey Color */
.btn-blue-grey-brd-anim {
    @include buttons($color-blue-grey, $color-white, transparent, transparent, 1px, $color-blue-grey, $color-blue-grey, $color-blue-grey);

    .btn-base-element-xs {
        @include buttons-element(darken($color-blue-grey, 4%), transparent, 6px 9px);
    }

    .btn-base-element-sm {
        @include buttons-element(darken($color-blue-grey, 4%), transparent, 9px 11px);
    }

    .btn-base-element-md {
        @include buttons-element(darken($color-blue-grey, 4%), transparent, 12px 13px);
    }

    .btn-base-element-lg {
        @include buttons-element(darken($color-blue-grey, 4%), transparent, 15px 15px);
    }
}

/* Button Border Grey Color */
.btn-grey-brd-anim {
    @include buttons($color-grey, $color-white, transparent, transparent, 1px, $color-grey, $color-grey, $color-grey);

    .btn-base-element-xs {
        @include buttons-element(darken($color-grey, 4%), transparent, 6px 9px);
    }

    .btn-base-element-sm {
        @include buttons-element(darken($color-grey, 4%), transparent, 9px 11px);
    }

    .btn-base-element-md {
        @include buttons-element(darken($color-grey, 4%), transparent, 12px 13px);
    }

    .btn-base-element-lg {
        @include buttons-element(darken($color-grey, 4%), transparent, 15px 15px);
    }
}

/* Button Border Blue Color */
.btn-blue-brd-anim {
    @include buttons($color-blue, $color-white, transparent, transparent, 1px, $color-blue, $color-blue, $color-blue);

    .btn-base-element-xs {
        @include buttons-element(darken($color-blue, 4%), transparent, 6px 9px);
    }

    .btn-base-element-sm {
        @include buttons-element(darken($color-blue, 4%), transparent, 9px 11px);
    }

    .btn-base-element-md {
        @include buttons-element(darken($color-blue, 4%), transparent, 12px 13px);
    }

    .btn-base-element-lg {
        @include buttons-element(darken($color-blue, 4%), transparent, 15px 15px);
    }
}

/* Button Border Teal Color */
.btn-teal-brd-anim {
    @include buttons($color-teal, $color-white, transparent, transparent, 1px, $color-teal, $color-teal, $color-teal);

    .btn-base-element-xs {
        @include buttons-element(darken($color-teal, 4%), transparent, 6px 9px);
    }

    .btn-base-element-sm {
        @include buttons-element(darken($color-teal, 4%), transparent, 9px 11px);
    }

    .btn-base-element-md {
        @include buttons-element(darken($color-teal, 4%), transparent, 12px 13px);
    }

    .btn-base-element-lg {
        @include buttons-element(darken($color-teal, 4%), transparent, 15px 15px);
    }
}

/* Button Border Green Color */
.btn-green-brd-anim {
    @include buttons($color-green, $color-white, transparent, transparent, 1px, $color-green, $color-green, $color-green);

    .btn-base-element-xs {
        @include buttons-element(darken($color-green, 4%), transparent, 6px 9px);
    }

    .btn-base-element-sm {
        @include buttons-element(darken($color-green, 4%), transparent, 9px 11px);
    }

    .btn-base-element-md {
        @include buttons-element(darken($color-green, 4%), transparent, 12px 13px);
    }

    .btn-base-element-lg {
        @include buttons-element(darken($color-green, 4%), transparent, 15px 15px);
    }
}

/* Button Border Red Color */
.btn-red-brd-anim {
    @include buttons($color-red, $color-white, transparent, transparent, 1px, $color-red, $color-red, $color-red);

    .btn-base-element-xs {
        @include buttons-element(darken($color-red, 4%), transparent, 6px 9px);
    }

    .btn-base-element-sm {
        @include buttons-element(darken($color-red, 4%), transparent, 9px 11px);
    }

    .btn-base-element-md {
        @include buttons-element(darken($color-red, 4%), transparent, 12px 13px);
    }

    .btn-base-element-lg {
        @include buttons-element(darken($color-red, 4%), transparent, 15px 15px);
    }
}

/* Button Border Pink Color */
.btn-pink-brd-anim {
    @include buttons($color-pink, $color-white, transparent, transparent, 1px, $color-pink, $color-pink, $color-pink);

    .btn-base-element-xs {
        @include buttons-element(darken($color-pink, 4%), transparent, 6px 9px);
    }

    .btn-base-element-sm {
        @include buttons-element(darken($color-pink, 4%), transparent, 9px 11px);
    }

    .btn-base-element-md {
        @include buttons-element(darken($color-pink, 4%), transparent, 12px 13px);
    }

    .btn-base-element-lg {
        @include buttons-element(darken($color-pink, 4%), transparent, 15px 15px);
    }
}

/* Button Border Purple Color */
.btn-purple-brd-anim {
    @include buttons($color-purple, $color-white, transparent, transparent, 1px, $color-purple, $color-purple, $color-purple);

    .btn-base-element-xs {
        @include buttons-element(darken($color-purple, 4%), transparent, 6px 9px);
    }

    .btn-base-element-sm {
        @include buttons-element(darken($color-purple, 4%), transparent, 9px 11px);
    }

    .btn-base-element-md {
        @include buttons-element(darken($color-purple, 4%), transparent, 12px 13px);
    }

    .btn-base-element-lg {
        @include buttons-element(darken($color-purple, 4%), transparent, 15px 15px);
    }
}

/* Button Border Gold Color */
.btn-gold-brd-anim {
    @include buttons($color-gold, $color-white, transparent, transparent, 1px, $color-gold, $color-gold, $color-gold);

    .btn-base-element-xs {
        @include buttons-element(darken($color-gold, 4%), transparent, 6px 9px);
    }

    .btn-base-element-sm {
        @include buttons-element(darken($color-gold, 4%), transparent, 9px 11px);
    }

    .btn-base-element-md {
        @include buttons-element(darken($color-gold, 4%), transparent, 12px 13px);
    }

    .btn-base-element-lg {
        @include buttons-element(darken($color-gold, 4%), transparent, 15px 15px);
    }
}

/* Button Border Facebook */
.btn-fb-brd-anim {
    @include buttons($color-fb, $color-white, transparent, transparent, 1px, $color-fb, $color-fb, $color-fb);

    .btn-base-element-xs {
        @include buttons-element(darken($color-fb, 4%), transparent, 6px 9px);
    }

    .btn-base-element-sm {
        @include buttons-element(darken($color-fb, 4%), transparent, 9px 11px);
    }

    .btn-base-element-md {
        @include buttons-element(darken($color-fb, 4%), transparent, 12px 13px);
    }

    .btn-base-element-lg {
        @include buttons-element(darken($color-fb, 4%), transparent, 15px 15px);
    }
}

/* Button Border Twitter */
.btn-tw-brd-anim {
    @include buttons($color-tw, $color-white, transparent, transparent, 1px, $color-tw, $color-tw, $color-tw);

    .btn-base-element-xs {
        @include buttons-element(darken($color-tw, 4%), transparent, 6px 9px);
    }

    .btn-base-element-sm {
        @include buttons-element(darken($color-tw, 4%), transparent, 9px 11px);
    }

    .btn-base-element-md {
        @include buttons-element(darken($color-tw, 4%), transparent, 12px 13px);
    }

    .btn-base-element-lg {
        @include buttons-element(darken($color-tw, 4%), transparent, 15px 15px);
    }
}

/* Button Border Dribbble */
.btn-dr-brd-anim {
    @include buttons($color-dr, $color-white, transparent, transparent, 1px, $color-dr, $color-dr, $color-dr);

    .btn-base-element-xs {
        @include buttons-element(darken($color-dr, 4%), transparent, 6px 9px);
    }

    .btn-base-element-sm {
        @include buttons-element(darken($color-dr, 4%), transparent, 9px 11px);
    }

    .btn-base-element-md {
        @include buttons-element(darken($color-dr, 4%), transparent, 12px 13px);
    }

    .btn-base-element-lg {
        @include buttons-element(darken($color-dr, 4%), transparent, 15px 15px);
    }
}

/* Button Border Instagram */
.btn-ig-brd-anim {
    @include buttons($color-ig, $color-white, transparent, transparent, 1px, $color-ig, $color-ig, $color-ig);

    .btn-base-element-xs {
        @include buttons-element(darken($color-ig, 4%), transparent, 6px 9px);
    }

    .btn-base-element-sm {
        @include buttons-element(darken($color-ig, 4%), transparent, 9px 11px);
    }

    .btn-base-element-md {
        @include buttons-element(darken($color-ig, 4%), transparent, 12px 13px);
    }

    .btn-base-element-lg {
        @include buttons-element(darken($color-ig, 4%), transparent, 15px 15px);
    }
}


/*--------------------------------------------------
    [Buttons Background Color]
----------------------------------------------------*/

/* Button Background Base Color */
.btn-base-bg {
    @include buttons($color-white, $color-white, $color-base, $color-base-light, 1px, transparent, transparent, transparent);

    .btn-base-element-xs {
        @include buttons-element(darken($color-base, 4%), transparent, 6px 9px);
    }

    .btn-base-element-sm {
        @include buttons-element(darken($color-base, 4%), transparent, 9px 11px);
    }

    .btn-base-element-md {
        @include buttons-element(darken($color-base, 4%), transparent, 12px 13px);
    }

    .btn-base-element-lg {
        @include buttons-element(darken($color-base, 4%), transparent, 15px 15px);
    }
}

/* Button Background White Color */
.btn-white-bg {
    @include buttons($color-dark, $color-white, $color-white, $color-base, 0, $color-white, $color-base, transparent);

    .btn-base-element-xs {
        @include buttons-element(transparent, darken($color-white, 6%), 6px 9px);
    }

    .btn-base-element-sm {
        @include buttons-element(transparent, darken($color-white, 6%), 9px 11px);
    }

    .btn-base-element-md {
        @include buttons-element(transparent, darken($color-white, 6%), 12px 13px);
    }

    .btn-base-element-lg {
        @include buttons-element(transparent, darken($color-white, 6%), 15px 15px);
    }
}

/* Button Background Dark Color */
.btn-dark-bg {
    @include buttons($color-white, $color-white, $color-dark, $color-dark-light, 1px, transparent, transparent, transparent);

    .btn-base-element-xs {
        @include buttons-element(darken($color-dark, 4%), transparent, 6px 9px);
    }

    .btn-base-element-sm {
        @include buttons-element(darken($color-dark, 4%), transparent, 9px 11px);
    }

    .btn-base-element-md {
        @include buttons-element(darken($color-dark, 4%), transparent, 12px 13px);
    }

    .btn-base-element-lg {
        @include buttons-element(darken($color-dark, 4%), transparent, 15px 15px);
    }
}

/* Button Background Blue Grey Color */
.btn-blue-grey-bg {
    @include buttons($color-white, $color-white, $color-blue-grey, $color-blue-grey-light, 1px, transparent, transparent, transparent);

    .btn-base-element-xs {
        @include buttons-element(darken($color-blue-grey, 4%), transparent, 6px 9px);
    }

    .btn-base-element-sm {
        @include buttons-element(darken($color-blue-grey, 4%), transparent, 9px 11px);
    }

    .btn-base-element-md {
        @include buttons-element(darken($color-blue-grey, 4%), transparent, 12px 13px);
    }

    .btn-base-element-lg {
        @include buttons-element(darken($color-blue-grey, 4%), transparent, 15px 15px);
    }
}

/* Button Background Grey Color */
.btn-grey-bg {
    @include buttons($color-white, $color-white, $color-grey, lighten($color-grey, 7%), 1px, transparent, transparent, transparent);

    .btn-base-element-xs {
        @include buttons-element(darken($color-grey, 4%), transparent, 6px 9px);
    }

    .btn-base-element-sm {
        @include buttons-element(darken($color-grey, 4%), transparent, 9px 11px);
    }

    .btn-base-element-md {
        @include buttons-element(darken($color-grey, 4%), transparent, 12px 13px);
    }

    .btn-base-element-lg {
        @include buttons-element(darken($color-grey, 4%), transparent, 15px 15px);
    }
}

/* Button Background Blue Color */
.btn-blue-bg {
    @include buttons($color-white, $color-white, $color-blue, $color-blue-light, 1px, transparent, transparent, transparent);

    .btn-base-element-xs {
        @include buttons-element(darken($color-blue, 4%), transparent, 6px 9px);
    }

    .btn-base-element-sm {
        @include buttons-element(darken($color-blue, 4%), transparent, 9px 11px);
    }

    .btn-base-element-md {
        @include buttons-element(darken($color-blue, 4%), transparent, 12px 13px);
    }

    .btn-base-element-lg {
        @include buttons-element(darken($color-blue, 4%), transparent, 15px 15px);
    }
}

/* Button Background Teal Color */
.btn-teal-bg {
    @include buttons($color-white, $color-white, $color-teal, $color-teal-light, 1px, transparent, transparent, transparent);

    .btn-base-element-xs {
        @include buttons-element(darken($color-teal, 4%), transparent, 6px 9px);
    }

    .btn-base-element-sm {
        @include buttons-element(darken($color-teal, 4%), transparent, 9px 11px);
    }

    .btn-base-element-md {
        @include buttons-element(darken($color-teal, 4%), transparent, 12px 13px);
    }

    .btn-base-element-lg {
        @include buttons-element(darken($color-teal, 4%), transparent, 15px 15px);
    }
}

/* Button Background Green Color */
.btn-green-bg {
    @include buttons($color-white, $color-white, $color-green, $color-green-light, 1px, transparent, transparent, transparent);

    .btn-base-element-xs {
        @include buttons-element(darken($color-green, 4%), transparent, 6px 9px);
    }

    .btn-base-element-sm {
        @include buttons-element(darken($color-green, 4%), transparent, 9px 11px);
    }

    .btn-base-element-md {
        @include buttons-element(darken($color-green, 4%), transparent, 12px 13px);
    }

    .btn-base-element-lg {
        @include buttons-element(darken($color-green, 4%), transparent, 15px 15px);
    }
}

/* Button Background Red Color */
.btn-red-bg {
    @include buttons($color-white, $color-white, $color-red, $color-red-light, 1px, transparent, transparent, transparent);

    .btn-base-element-xs {
        @include buttons-element(darken($color-red, 4%), transparent, 6px 9px);
    }

    .btn-base-element-sm {
        @include buttons-element(darken($color-red, 4%), transparent, 9px 11px);
    }

    .btn-base-element-md {
        @include buttons-element(darken($color-red, 4%), transparent, 12px 13px);
    }

    .btn-base-element-lg {
        @include buttons-element(darken($color-red, 4%), transparent, 15px 15px);
    }
}

/* Button Background Pink Color */
.btn-pink-bg {
    @include buttons($color-white, $color-white, $color-pink, $color-pink-light, 1px, transparent, transparent, transparent);

    .btn-base-element-xs {
        @include buttons-element(darken($color-pink, 4%), transparent, 6px 9px);
    }

    .btn-base-element-sm {
        @include buttons-element(darken($color-pink, 4%), transparent, 9px 11px);
    }

    .btn-base-element-md {
        @include buttons-element(darken($color-pink, 4%), transparent, 12px 13px);
    }

    .btn-base-element-lg {
        @include buttons-element(darken($color-pink, 4%), transparent, 15px 15px);
    }
}

/* Button Background Purple Color */
.btn-purple-bg {
    @include buttons($color-white, $color-white, $color-purple, $color-purple-light, 1px, transparent, transparent, transparent);

    .btn-base-element-xs {
        @include buttons-element(darken($color-purple, 4%), transparent, 6px 9px);
    }

    .btn-base-element-sm {
        @include buttons-element(darken($color-purple, 4%), transparent, 9px 11px);
    }

    .btn-base-element-md {
        @include buttons-element(darken($color-purple, 4%), transparent, 12px 13px);
    }

    .btn-base-element-lg {
        @include buttons-element(darken($color-purple, 4%), transparent, 15px 15px);
    }
}

/* Button Background Gold Color */
.btn-gold-bg {
    @include buttons($color-white, $color-white, $color-gold, $color-gold-light, 1px, transparent, transparent, transparent);

    .btn-base-element-xs {
        @include buttons-element(darken($color-gold, 4%), transparent, 6px 9px);
    }

    .btn-base-element-sm {
        @include buttons-element(darken($color-gold, 4%), transparent, 9px 11px);
    }

    .btn-base-element-md {
        @include buttons-element(darken($color-gold, 4%), transparent, 12px 13px);
    }

    .btn-base-element-lg {
        @include buttons-element(darken($color-gold, 4%), transparent, 15px 15px);
    }
}

/* Button Background Facebook */
.btn-fb-bg {
    @include buttons($color-white, $color-white, $color-fb, $color-fb, 1px, transparent, transparent, transparent);

    .btn-base-element-xs {
        @include buttons-element(darken($color-fb, 4%), transparent, 6px 9px);
    }

    .btn-base-element-sm {
        @include buttons-element(darken($color-fb, 4%), transparent, 9px 11px);
    }

    .btn-base-element-md {
        @include buttons-element(darken($color-fb, 4%), transparent, 12px 13px);
    }

    .btn-base-element-lg {
        @include buttons-element(darken($color-fb, 4%), transparent, 15px 15px);
    }
}

/* Button Background Twitter */
.btn-tw-bg {
    @include buttons($color-white, $color-white, $color-tw, $color-tw, 1px, transparent, transparent, transparent);

    .btn-base-element-xs {
        @include buttons-element(darken($color-tw, 4%), transparent, 6px 9px);
    }

    .btn-base-element-sm {
        @include buttons-element(darken($color-tw, 4%), transparent, 9px 11px);
    }

    .btn-base-element-md {
        @include buttons-element(darken($color-tw, 4%), transparent, 12px 13px);
    }

    .btn-base-element-lg {
        @include buttons-element(darken($color-tw, 4%), transparent, 15px 15px);
    }
}

/* Button Background Dribbble */
.btn-dr-bg {
    @include buttons($color-white, $color-white, $color-dr, $color-dr, 1px, transparent, transparent, transparent);

    .btn-base-element-xs {
        @include buttons-element(darken($color-dr, 4%), transparent, 6px 9px);
    }

    .btn-base-element-sm {
        @include buttons-element(darken($color-dr, 4%), transparent, 9px 11px);
    }

    .btn-base-element-md {
        @include buttons-element(darken($color-dr, 4%), transparent, 12px 13px);
    }

    .btn-base-element-lg {
        @include buttons-element(darken($color-dr, 4%), transparent, 15px 15px);
    }
}

/* Button Background Instagram */
.btn-ig-bg {
    @include buttons($color-white, $color-white, $color-ig, $color-ig, 1px, transparent, transparent, transparent);

    .btn-base-element-xs {
        @include buttons-element(darken($color-ig, 4%), transparent, 6px 9px);
    }

    .btn-base-element-sm {
        @include buttons-element(darken($color-ig, 4%), transparent, 9px 11px);
    }

    .btn-base-element-md {
        @include buttons-element(darken($color-ig, 4%), transparent, 12px 13px);
    }

    .btn-base-element-lg {
        @include buttons-element(darken($color-ig, 4%), transparent, 15px 15px);
    }
}


/*------------------------------------------------------------------
    [Buttons Sizes]
------------------------------------------------------------------*/

/* Mini Size */
.btn-base-xs {
    @include buttons-size($font-size-12, $font-weight-300, 8px 15px);

    &.btn-base-animate-to-top,
    &.btn-base-animate-to-right {
        padding-right: 40px;
    }
}

/* Small Size */
.btn-base-sm {
    @include buttons-size($font-size-14, $font-weight-300, 9px 22px);

    &.btn-base-animate-to-top,
    &.btn-base-animate-to-right {
        padding-right: 50px;
    }
}

/* Medium Size */
.btn-base-md {
    @include buttons-size($font-size-16, $font-weight-300, 12px 25px);

    &.btn-base-animate-to-top,
    &.btn-base-animate-to-right {
        padding-right: 65px;
    }
}

/* Large Size */
.btn-base-lg {
    @include buttons-size($font-size-20, $font-weight-300, 15px 30px);

    &.btn-base-animate-to-top,
    &.btn-base-animate-to-right {
        padding-right: 75px;
    }
}


/*--------------------------------------------------
    [Buttons Toggle]
----------------------------------------------------*/

/* Button White Toggle */
.btn-group {
    &.btn-white-toggle {
        &.open {
            .btn-white-bg {
                box-shadow: none;

                &:after {
                    color: $color-base;
                    content: "\f0d8";
                }
            }
        }

        .btn-white-bg {
            width: 300px;
            @include font($size: $font-size-15, $weight: $font-weight-300);
            color: $color-dark;
            background: $color-white;
            padding: 12px 100px 12px 15px;

            &:after {
                @include position(absolute, $top: 12px, $right: 15px);
                @include font($size: $font-size-15, $family: $font-family-font-awesome);
                color: $color-dark;
                content: "\f0d7";
            }

            &:hover,
            &:focus,
            &.focus {
                color: $color-dark;
                background: $color-white;
                border-color: $color-white;
                box-shadow: inset none;
            }
        }

        .dropdown-menu {
            width: 300px;
            border: none;
            @include border-radius(3px);
            box-shadow: none;
            padding: 0;
            margin: 1px 0 0;

            > li {
                > a {
                    @include font($size: $font-size-15, $weight: $font-weight-300);
                    color: $color-dark;
                    border-bottom: 1px solid $color-sky-light;
                    padding: 10px 15px;

                    .dropdown-menu-icon {
                        min-width: 25px;
                        text-align: center;
                        vertical-align: middle;
                        margin-right: 5px;
                    }

                    &:hover,
                    &:focus {
                        background: $color-base;
                        color: $color-white;
                    }
                }

                &:first-child {
                    > a {
                        border-top-right-radius: 3px;
                        border-top-left-radius: 3px;
                    }
                }

                &:last-child {
                    > a {
                        border-bottom: none;
                        border-bottom-right-radius: 3px;
                        border-bottom-left-radius: 3px;
                    }
                }
            }
        }
    }
}


/*------------------------------------------------------------------
    [Buttons Icon Animate To Top]
------------------------------------------------------------------*/

.btn-base-animate-to-top {
    z-index: 1;
    display: inline-block;
    text-align: center;
    overflow: hidden;

    &:hover {
        .btn-base-element-icon {
            @include animation(toTopFromBottom .3s forwards);
        }
    }
}

@include keyframes(toTopFromBottom) {
    49% {
        @include translate3d(0,-100%,0);
    }
    50% {
        opacity: 0;
        @include translate3d(0,100%,0);
    }
    51% {
        opacity: 1;
    }
}


/*------------------------------------------------------------------
    [Buttons Icon Animate To Right]
------------------------------------------------------------------*/

.btn-base-animate-to-right {
    z-index: 1;
    display: inline-block;
    text-align: center;
    overflow: hidden;

    &:hover {
        .btn-base-element-icon {
            @include animation(toRightFromLeft .3s forwards);
        }
    }
}

@include keyframes(toRightFromLeft) {
    49% {
        @include translate3d(0,100%,0);
    }
    50% {
        opacity: 0;
        @include translate3d(0,-100%,0);
    }
    51% {
        opacity: 1;
    }
}


/*------------------------------------------------------------------
    [Buttons Dropdown Default]
------------------------------------------------------------------*/

.btn-dropdown-group {
    &.open {
        .btn-dropdown-default,
        .btn-dropdown-default.focus,
        .btn-dropdown-default:focus,
        .btn-dropdown-default:hover {
            box-shadow: none;
            background: transparent;
        }

        .btn-dropdown-toggle {
            background: $color-base;
        }
    }

    &:hover {
        .btn-dropdown-toggle {
            background: $color-base;
        }
    }

    .btn-dropdown-default {
        background: transparent;
        border: none;
        color: $color-dark;

        &:hover {
            background: transparent;
            box-shadow: none;
        }

        &.active,
        &:active {
            &.focus,
            &:focus,
            &:hover {
                background: transparent;
                box-shadow: none;
                border: none;
            }
        }
    }

    .btn-dropdown-toggle {
        @include position(relative, $top: -5px);
        display: inline-block;
        @include size(4px);
        background: lighten($color-dark, 35%);
        @include border-radius(50%);

        + .btn-dropdown-toggle {
            margin-left: -1px;
        }
    }

    .dropdown-menu {
        box-shadow: 0 2px 5px 3px lighten($color-tint-light, 1%);
        border: none;

        > li {
            > a {
                color: $color-dark;
                @include font($size: $font-size-14, $weight: $font-weight-300);
            }

            &:hover {
                > a {
                    background: $color-sky-light;
                }
            }
        }
    }
}

/* Media Queries below 768px */
@media (max-width: $screen-sm-min) {
    .btn-dropdown-group {
        .dropdown-menu {
            &.xs-dropdown-menu-right {
                left: auto;
                right: 0;
            }
        }
    }
}