.animated-button {
    background: linear-gradient(-30deg, #FF7355 50%, #CC3F2C 50%);
    padding: 6px 8px;
    margin: 8px 8px 0 4px;
    display: inline-block;
    -webkit-transform: translate(0%, 0%);
    transform: translate(0%, 0%);
    overflow: hidden;
    color: #fff;
    font-size: 14px;
    letter-spacing: 2.5px;
    text-align: center;
    text-transform: uppercase;
    text-decoration: none;
    border-radius: 8px;
    position: relative;
    max-height: 32px;
}

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

.animated-button:hover {
    color: #fff;
}

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

.animated-button span {
    position: absolute;
}

/* top */
.animated-button span:nth-child(1) {
    top: 0px;
    left: 0px;
    width: 100%;
    height: 2px;
    background: linear-gradient(to left, rgba(255, 211, 196, 0), #FFD3C4);
    -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%);
    }
}

/* right */
.animated-button span:nth-child(2) {
    top: 0px;
    right: 0px;
    height: 100%;
    width: 2px;
    background: linear-gradient(to top, rgba(255, 211, 196, 0), #FFD3C4);
    -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%);
    }
}

/* bottom */
.animated-button span:nth-child(3) {
    bottom: 0px;
    left: 0px;
    width: 100%;
    height: 2px;
    background: linear-gradient(to right, rgba(255, 211, 196, 0), #FFD3C4);
    -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%);
    }
}

/* left */
.animated-button span:nth-child(4) {
    top: 0px;
    left: 0px;
    height: 100%;
    width: 2px;
    background: linear-gradient(to bottom, rgba(255, 211, 196, 0), #FFD3C4);
    -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%);
    }
}