.btn {
    display: block !important;
    padding: 0 !important;
    overflow: hidden;
    position: relative;
    width: 160px;
    height: 40px;
    line-height: 38px;
    transition-duration: 300ms;
}

#contactMsg {
    transition: all 1.5s ease-in-out;
    height: 0;
    opacity: 0;
}

.btn.success {
    animation: submitted 1s;
    animation-fill-mode: forwards;
    -webkit-animation: submitted 1s;
    -webkit-animation-fill-mode: forwards;
}

.btn:after {
    content: "";
    width: 0%;
    height: 4px;
    position: absolute;
    background: #22c55e;
    top: calc(50% - 2px);
    transition: all 3s;
    -webkit-transition: all 3s;
    left: 0;
}

.btn svg {
    position: absolute;
    top: 0px;
    left: 0;
}

.btn svg rect {
    fill: none;
    stroke: #22c55e;
    stroke-width: 16;
    stroke-dasharray: 20, 200;
    stroke-dashoffset: 20;
    -webkit-transition: all 2000ms cubic-bezier(0.19, 1, 0.22, 1);
    transition: all 2000ms cubic-bezier(0.19, 1, 0.22, 1);
    opacity: 0;
}

.btn.success svg rect {
    opacity: 1;
    stroke-width: 4;
    stroke-dasharray: 170, 0;
    stroke-dashoffset: 500;
    -webkit-transition-delay: 0.2s;
    transition-delay: 0.2s;
}

.btn span:nth-of-type(1) { opacity: 1; }
.btn.sending span:nth-of-type(1),
.btn.success span:nth-of-type(1) { transition: opacity 0.1s; opacity: 0; display: none; }
.btn span:nth-of-type(3) { opacity: 0; }
.btn span:nth-of-type(2) { opacity: 0; display: block; }

.btn.sending span:nth-of-type(2) {
    animation: load 1s;
    -webkit-animation: load 1s;
    animation-fill-mode: forwards;
    -webkit-animation-fill-mode: forwards;
}

.btn.success span:nth-of-type(3) {
    opacity: 1;
    transition: opacity 3s;
    -webkit-transition: opacity 3s;
    margin-top: -40px;
    display: block;
}

.btn.sending:after {
    animation: loadingBar 3s infinite;
    -webkit-animation: loadingBar 3s infinite;
}

.btn.sending {
    animation: loadingBtn 3s;
    animation-fill-mode: forwards;
    -webkit-animation: loadingBtn 3s;
    -webkit-animation-fill-mode: forwards;
}

@keyframes loadingBar {
    0%   { left: 0; width: 0%; }
    50%  { width: 100%; left: 0; }
    51%  { right: 0; left: auto; width: 100%; }
    100% { width: 0%; right: 0; left: auto; }
}

@keyframes loadingBtn {
    0%   { height: 40px; margin-top: 0; border-radius: 4px; }
    10%  { height: 48px; margin-top: -4px; background: #22c55e; border-color: transparent; border-width: 0; }
    20%  { height: 4px; margin-top: 20px; background: #ddd; border-radius: 0; border-width: 0; }
    100% { height: 4px; margin-top: 20px; background: #ddd; border-radius: 0; border-width: 0; }
}

@keyframes submitted {
    0%   { height: 4px; margin-top: 20px; background: #ddd; border-radius: 0; border-width: 0; }
    100% { height: 40px; margin-top: 2px; border-radius: 4px; background: none; color: #60d591; border-color: transparent; border-width: 0; }
}

@keyframes load {
    from { opacity: 1; }
    to   { opacity: 0; display: table-cell; }
}