.button {
    position: relative;
    display: inline-block;
    /*width: 360px;*/
    line-height: 40px;
    text-align: center;
    color: #fff;
    text-decoration: none;
    padding: 0 15px;
    font-family: 'Montserrat-SemiBold';
    /*text-transform: uppercase;*/
    /*margin: 0 15px;*/
    overflow: hidden;
    -webkit-transition: 0.9s;
    transition: 0.9s;
    background: none;
    border: none;
}

.button-sm {
}

.button-md {
    width: 120px;
}

    .button-md span {
        font-size: 13px;
    }

.button-lg {
    width: 150px;
}

.button-xl {
    width: 210px;
    margin-left: 10px;
}

.button__line--bottom {
    bottom: 0;
    right: 0;
    height: 1px;
    width: 100%;
}

.button span.name {
    position: relative;
    z-index: 1;
    font-size: 13px;
}

.button img {
    height: 10px;
    margin-right: 10px;
    margin-top: -3px;
}

.button__line {
    -webkit-transition: all 100ms ease-in;
    transition: all 100ms ease-in;
    background-color: #fff;
    position: absolute;
    z-index: 1;
}

.button-black {
    color: #000;
}

    .button-black span.name {
        color: #000;
        transition: color 0.3s ease-in-out;
        -webkit-transition: color 0.3s ease-in-out;
        -o-transition: color 0.3s ease-in-out;
    }

    .button-black .button__line {
        background-color: #000;
    }

@media (min-width: 768px) {

    .button:hover {
        color: #FFF;
        text-decoration: none;
    }

        .button:hover .button__line--left {
            -webkit-transform: scaleY(1);
            transform: scaleY(1);
            -webkit-transition-delay: 0ms;
            transition-delay: 0ms;
        }

        .button:hover .button__line--top {
            -webkit-transform: scaleX(1);
            transform: scaleX(1);
            -webkit-transition-delay: 100ms;
            transition-delay: 100ms;
        }

        .button:hover .button__line--right {
            -webkit-transform: scaleY(1);
            transform: scaleY(1);
            -webkit-transition-delay: 300ms;
            transition-delay: 300ms;
        }

    .button:after {
        content: '';
        width: 0;
        height: 0;
        -webkit-transform: rotate(360deg);
        border-style: solid;
        border-width: 0 0 0 0;
        border-color: transparent #fe1b7b transparent transparent;
        position: absolute;
        top: 0;
        right: 0;
        -webkit-transition: 0.9s;
        transition: 0.9s;
    }

    .button:before {
        content: '';
        width: 0;
        height: 0;
        -webkit-transform: rotate(360deg);
        border-style: solid;
        border-width: 0 0 0 0;
        border-color: transparent transparent transparent #fe1b7b;
        position: absolute;
        bottom: 0;
        left: 0;
        -webkit-transition: 0.9s;
        transition: 0.9s;
    }

    .button-md:hover:before, .button-md:hover:after {
        border-width: 80px 250px;
    }


    .button-lg:hover:before, .button-lg:hover:after {
        border-width: 40px 205px;
    }

    .button-xl:hover:before, .button-xl:hover:after {
        border-width: 40px 255px;
    }

    .button__line--left {
        height: 100%;
        left: 0;
        top: 0;
        -webkit-transform: scaleY(0);
        transform: scaleY(0);
        width: 1px;
        -webkit-transform-origin: left bottom;
        transform-origin: left bottom;
        -webkit-transition-delay: 300ms;
        transition-delay: 300ms;
    }

    .button__line--right {
        right: 0;
        top: 0;
        height: 100%;
        width: 1px;
        -webkit-transform: scaleY(0);
        transform: scaleY(0);
        -webkit-transform-origin: right top;
        transform-origin: right top;
    }

    .button__line--top {
        top: 0;
        left: 0;
        height: 1px;
        width: 100%;
        -webkit-transform: scaleX(0);
        transform: scaleX(0);
        -webkit-transform-origin: left top;
        transform-origin: left top;
        -webkit-transition: all 200ms ease-in;
        transition: all 200ms ease-in;
        -webkit-transition-delay: 100ms;
        transition-delay: 100ms;
    }

    .button-black:hover {
        color: #FFF;
    }

        .button-black:hover span.name {
            color: #FFF;
        }
}

.button {
    position: relative;
    display: inline-block;
    /*width: 360px;*/
    line-height: 40px;
    text-align: center;
    color: #fff;
    text-decoration: none;
    padding: 0 15px;
    font-family: 'Montserrat-SemiBold';
    /*text-transform: uppercase;*/
    /*margin: 0 15px;*/
    overflow: hidden;
    -webkit-transition: 0.9s;
    transition: 0.9s;
    background: none;
    border: none;
}

.button-sm {
}

.button-md {
    width: 120px;
}

    .button-md span {
        font-size: 13px;
    }

.button-lg {
    width: 150px;
}

.button-xl {
    width: 210px;
    margin-left: 10px;
    background: aqua;
    border-radius: 30px;
}

.button__line--bottom {
    bottom: 0;
    right: 0;
    height: 1px;
    width: 100%;
}

.button span.name {
    position: relative;
    z-index: 1;
    font-size: 13px;
    color: #0011ff; 
}

.button img {
    height: 10px;
    margin-right: 10px;
    margin-top: -3px;
}

.button__line {
    -webkit-transition: all 100ms ease-in;
    transition: all 100ms ease-in;
    background-color: #fff;
    position: absolute;
    z-index: 1;
}

.button-black {
    color: #000;
}

    .button-black span.name {
        color: #000;
        transition: color 0.3s ease-in-out;
        -webkit-transition: color 0.3s ease-in-out;
        -o-transition: color 0.3s ease-in-out;
    }

    .button-black .button__line {
        background-color: #000;
    }

@media (min-width: 768px) {

    .button:hover {
        color: #FFF;
        text-decoration: none;
    }

        .button:hover .button__line--left {
            -webkit-transform: scaleY(1);
            transform: scaleY(1);
            -webkit-transition-delay: 0ms;
            transition-delay: 0ms;
        }

        .button:hover .button__line--top {
            -webkit-transform: scaleX(1);
            transform: scaleX(1);
            -webkit-transition-delay: 100ms;
            transition-delay: 100ms;
        }

        .button:hover .button__line--right {
            -webkit-transform: scaleY(1);
            transform: scaleY(1);
            -webkit-transition-delay: 300ms;
            transition-delay: 300ms;
        }

    .button:after {
        content: '';
        width: 0;
        height: 0;
        -webkit-transform: rotate(360deg);
        border-style: solid;
        border-width: 0 0 0 0;
        border-color: transparent #1bf6fe transparent transparent;
        position: absolute;
        top: 0;
        right: 0;
        -webkit-transition: 0.9s;
        transition: 0.9s;
    }

    .button:before {
        content: '';
        width: 0;
        height: 0;
        -webkit-transform: rotate(360deg);
        border-style: solid;
        border-width: 0 0 0 0;
        border-color: transparent transparent transparent #1bf6fe;
        position: absolute;
        bottom: 0;
        left: 0;
        -webkit-transition: 0.9s;
        transition: 0.9s;
    }

    .button-md:hover:before, .button-md:hover:after {
        border-width: 80px 250px;
    }


    .button-lg:hover:before, .button-lg:hover:after {
        border-width: 40px 205px;
    }

    .button-xl:hover:before, .button-xl:hover:after {
        border-width: 40px 255px;
    }

    .button__line--left {
        height: 100%;
        left: 0;
        top: 0;
        -webkit-transform: scaleY(0);
        transform: scaleY(0);
        width: 1px;
        -webkit-transform-origin: left bottom;
        transform-origin: left bottom;
        -webkit-transition-delay: 300ms;
        transition-delay: 300ms;
    }

    .button__line--right {
        right: 0;
        top: 0;
        height: 100%;
        width: 1px;
        -webkit-transform: scaleY(0);
        transform: scaleY(0);
        -webkit-transform-origin: right top;
        transform-origin: right top;
    }

    .button__line--top {
        top: 0;
        left: 0;
        height: 1px;
        width: 100%;
        -webkit-transform: scaleX(0);
        transform: scaleX(0);
        -webkit-transform-origin: left top;
        transform-origin: left top;
        -webkit-transition: all 200ms ease-in;
        transition: all 200ms ease-in;
        -webkit-transition-delay: 100ms;
        transition-delay: 100ms;
    }

    .button-black:hover {
        color: #FFF;
    }

        .button-black:hover span.name {
            color: #FFF;
        }
}