.submit-button {
    position: relative;
    padding: 15px 45px;
    width: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.5rem;
    border-radius: 15px;
    border: 2px solid #00c2cb;
    background: none;
    color: #00c2cb;
    cursor: pointer;
    outline: none;
    transition: 200ms;
}

    .submit-button i {
        position: absolute;
        color: transparent;
        transition: 200ms;
    }

    .submit-button:focus {
        color: transparent;
        outline: none;
        border: 2px solid transparent;
        border-radius: 50%;
        width: 50px;
        height: 50px;
        padding: 25px 25px;
        border-left: 2px solid #00c2cb;
        animation: spin 2s 500ms forwards;
    }

        .submit-button:focus i {
            animation: check 300ms 2250ms forwards;
        }

@keyframes spin {
    80% {
        border: 2px solid transparent;
        border-left: 2px solid #00c2cb;
    }

    100% {
        transform: rotate(720deg);
        border: 2px solid #00c2cb;
    }
}

@keyframes check {
    to {
        color: #00c2cb;
    }
}