/*
 * Animated CSS button
 * Copyright Alexander Bodin 2019-09-07
 *
 * Useage: .class {@import button($button-size, $hue, $sat);}
 */
.animated-button {
    /* background: linear-gradient(-30deg, #0b1b3d 50%, #08142b 50%);*/
    background: linear-gradient(-30deg, #17a2b8 50%, #186c79 50%) ;
    margin: 12px;
    display: inline-block;
    -webkit-transform: translate(0%, 0%);
    transform: translate(0%, 0%);
    overflow: hidden;
    color: #95ecff;
    font-size: 20px;
    letter-spacing: 2.5px;
    text-align: center;
    text-transform: uppercase;
    text-decoration: none;
    -webkit-box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
}

    .animated-button::before {
        content: '';
        position: absolute;
        top: 0px;
        left: 0px;
        width: 100%;
        height: 100%;
        background-color: #8592ad;
        opacity: 0;
        -webkit-transition: .2s opacity ease-in-out;
        transition: .2s opacity ease-in-out;
    }

    .animated-button:hover::before {
        opacity: 0.2;
    }

    .animated-button span {
        position: absolute;
    }

        .animated-button span:nth-child(1) {
            top: 0px;
            left: 0px;
            width: 100%;
            height: 2px;
            background: -webkit-gradient(linear, right top, left top, from(rgba(8, 20, 43, 0)), to(#2662d9));
            background: linear-gradient(to left, rgba(8, 20, 43, 0), #2662d9);
            -webkit-animation: 2s animateTop linear infinite;
            animation: 2s animateTop linear infinite;
        }

@-webkit-keyframes animateTop {
    0% {
        -webkit-transform: translateX(100%);
        transform: translateX(100%);
    }

    100% {
        -webkit-transform: translateX(-100%);
        transform: translateX(-100%);
    }
}

@keyframes animateTop {
    0% {
        -webkit-transform: translateX(100%);
        transform: translateX(100%);
    }

    100% {
        -webkit-transform: translateX(-100%);
        transform: translateX(-100%);
    }
}

.animated-button span:nth-child(2) {
    top: 0px;
    right: 0px;
    height: 100%;
    width: 2px;
    background: -webkit-gradient(linear, left bottom, left top, from(rgba(8, 20, 43, 0)), to(#2662d9));
    background: linear-gradient(to top, rgba(8, 20, 43, 0), #2662d9);
    -webkit-animation: 2s animateRight linear -1s infinite;
    animation: 2s animateRight linear -1s infinite;
}

@-webkit-keyframes animateRight {
    0% {
        -webkit-transform: translateY(100%);
        transform: translateY(100%);
    }

    100% {
        -webkit-transform: translateY(-100%);
        transform: translateY(-100%);
    }
}

@keyframes animateRight {
    0% {
        -webkit-transform: translateY(100%);
        transform: translateY(100%);
    }

    100% {
        -webkit-transform: translateY(-100%);
        transform: translateY(-100%);
    }
}

.animated-button span:nth-child(3) {
    bottom: 0px;
    left: 0px;
    width: 100%;
    height: 2px;
    background: -webkit-gradient(linear, left top, right top, from(rgba(8, 20, 43, 0)), to(#2662d9));
    background: linear-gradient(to right, rgba(8, 20, 43, 0), #2662d9);
    -webkit-animation: 2s animateBottom linear infinite;
    animation: 2s animateBottom linear infinite;
}

@-webkit-keyframes animateBottom {
    0% {
        -webkit-transform: translateX(-100%);
        transform: translateX(-100%);
    }

    100% {
        -webkit-transform: translateX(100%);
        transform: translateX(100%);
    }
}

@keyframes animateBottom {
    0% {
        -webkit-transform: translateX(-100%);
        transform: translateX(-100%);
    }

    100% {
        -webkit-transform: translateX(100%);
        transform: translateX(100%);
    }
}

.animated-button span:nth-child(4) {
    top: 0px;
    left: 0px;
    height: 100%;
    width: 2px;
    background: -webkit-gradient(linear, left top, left bottom, from(rgba(8, 20, 43, 0)), to(#2662d9));
    background: linear-gradient(to bottom, rgba(8, 20, 43, 0), #2662d9);
    -webkit-animation: 2s animateLeft linear -1s infinite;
    animation: 2s animateLeft linear -1s infinite;
}

@-webkit-keyframes animateLeft {
    0% {
        -webkit-transform: translateY(-100%);
        transform: translateY(-100%);
    }

    100% {
        -webkit-transform: translateY(100%);
        transform: translateY(100%);
    }
}

@keyframes animateLeft {
    0% {
        -webkit-transform: translateY(-100%);
        transform: translateY(-100%);
    }

    100% {
        -webkit-transform: translateY(100%);
        transform: translateY(100%);
    }
}

.animated-button8 {
    /*background: linear-gradient(-30deg, #0b243d 50%, #081a2b 50%);*/
    background: linear-gradient(353deg, #186c79, #00a9c3);
    padding: 1vmin 3vmin;
    margin: 5px;
    display: inline-block;
    -webkit-transform: translate(0%, 0%);
    transform: translate(0%, 0%);
    overflow: hidden;
    color: white;
    font-size: calc(0.1vmin + 1rem);
    letter-spacing: 1px;
    text-align: center;
    text-transform: uppercase;
    text-decoration: none;
    -webkit-box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
    border-radius: 2px;
    border-width: 0px;
    box-shadow: 2px 2px 3px red;
}
    .animated-button8:focus {
        border-width: 0px;
        outline: none;
        box-shadow: 2px 2px 3px red;
    }
    .animated-button8:hover {
        background: linear-gradient(353deg, #014b56, #3796a5);
    }
    .animated-button8:active {
        background: linear-gradient(353deg, #014b56, #3796a5);
        box-shadow: inset 2px 2px 2px red;
        outline: none;
    }
    .animated-button8::before {
        content: '';
        position: absolute;
        top: 0px;
        left: 0px;
        width: 100%;
        height: 100%;
        background-color: #17a2b8;
        opacity: 0;
        -webkit-transition: .2s opacity ease-in-out;
        transition: .2s opacity ease-in-out;
    }

    .animated-button8:hover::before {
        opacity: 0.2;
    }

    .animated-button8 span {
        position: absolute;
    }

        .animated-button8 span:nth-child(1) {
            top: 0px;
            left: 0px;
            width: 100%;
            height: 2px;
            background: -webkit-gradient(linear, right top, left top, from(rgba(8, 26, 43, 0)), to(#00dcff));
            background: linear-gradient(to left, rgba(8, 26, 43, 0), #00dcff);
            -webkit-animation: 2s animateTop linear infinite;
            animation: 2s animateTop linear infinite;
        }

@keyframes animateTop {
    0% {
        -webkit-transform: translateX(100%);
        transform: translateX(100%);
    }

    100% {
        -webkit-transform: translateX(-100%);
        transform: translateX(-100%);
    }
}

.animated-button8 span:nth-child(2) {
    top: 0px;
    right: 0px;
    height: 100%;
    width: 2px;
    background: -webkit-gradient(linear, left bottom, left top, from(rgba(8, 26, 43, 0)), to(#00dcff));
    background: linear-gradient(to top, rgba(8, 26, 43, 0), #00dcff);
    -webkit-animation: 2s animateRight linear -1s infinite;
    animation: 2s animateRight linear -1s infinite;
}

@keyframes animateRight {
    0% {
        -webkit-transform: translateY(100%);
        transform: translateY(100%);
    }

    100% {
        -webkit-transform: translateY(-100%);
        transform: translateY(-100%);
    }
}

.animated-button8 span:nth-child(3) {
    bottom: 0px;
    left: 0px;
    width: 100%;
    height: 2px;
    background: -webkit-gradient(linear, left top, right top, from(rgba(8, 26, 43, 0)), to(#00dcff));
    background: linear-gradient(to right, rgba(8, 26, 43, 0), #00dcff);
    -webkit-animation: 2s animateBottom linear infinite;
    animation: 2s animateBottom linear infinite;
}

@keyframes animateBottom {
    0% {
        -webkit-transform: translateX(-100%);
        transform: translateX(-100%);
    }

    100% {
        -webkit-transform: translateX(100%);
        transform: translateX(100%);
    }
}

.animated-button8 span:nth-child(4) {
    top: 0px;
    left: 0px;
    height: 100%;
    width: 2px;
    background: -webkit-gradient(linear, left top, left bottom, from(rgba(8, 26, 43, 0)), to(#00dcff));
    background: linear-gradient(to bottom, rgba(8, 26, 43, 0), #00dcff);
    -webkit-animation: 2s animateLeft linear -1s infinite;
    animation: 2s animateLeft linear -1s infinite;
}

@keyframes animateLeft {
    0% {
        -webkit-transform: translateY(-100%);
        transform: translateY(-100%);
    }

    100% {
        -webkit-transform: translateY(100%);
        transform: translateY(100%);
    }
}