Button Animation in HTML/CSS

Question

I have the following code. There's two things I would like to fix:

1. When you click the submit button, you will see a sudden color change, how can I remove that? It looks like a glitchy animation. As soon as you click the submit button, you will see the sudden color change into something yellowish or whitish.

2. When you click the submit button, and the animation plays, I want the checkmark with the circle background to be displayed towards the left, or at the same place where the button is. Right now, the checkmark and the circle are displayed more towards the right, but how can I make it so I make them display the same place where the button is?

Any suggestions? Thanks

var basicTimeline = anime.timeline({
  autoplay: false,
});

var pathEls = $(".check");
for (var i = 0; i < pathEls.length; i++) {
  var pathEl = pathEls[i];
  var offset = anime.setDashoffset(pathEl);
  pathEl.setAttribute("stroke-dashoffset", offset);
}

basicTimeline
  .add({
    targets: ".text",
    duration: 1,
    opacity: "0"
  })
  .add({
    targets: ".button",
    duration: 1200,
    height: 20,
    width: 200,
    backgroundColor: "#D3D3D3",
    border: "0",
    borderRadius: 100
  })
  .add({
    targets: ".progress-bar",
    duration: 2000,
    width: 200,
    easing: "linear"
  })
  .add({
    targets: ".button",
    width: 0,
    duration: 1
  })
  .add({
    targets: ".progress-bar",
    width: 50,
    height: 50,
    delay: 500,
    duration: 750,
    borderRadius: 80,
    backgroundColor: "#0563bb"
  })
  .add({
    targets: pathEl,
    strokeDashoffset: [offset, 0],
    duration: 200,
    easing: "easeInOutSine",
    complete: () =>
      setTimeout(() => $('#my-form').submit(), 100)
  });


$(".button").click(playButtonAnim);

$(".text").click(playButtonAnim);

function playButtonAnim() {
  basicTimeline.play();
}

input[type=submit] {
  background-color: #0563bb;
  color: white;
  padding: 12px 20px;
  border: none;
  cursor: pointer;
}

input[type=submit]:hover {
  opacity: 0.9;
}

.contactform {
  position: relative;
  border-radius: 50px;
  background-color: #f2f2f2;
  padding: 5px;
  z-index: 2;
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: auto;
  margin-top: 1%;
  width: 100%;
  animation-name: gradient;
  animation-duration: 3s;
  animation-iteration-count: infinite;
}

.contactform:hover {
  animation-name: gradient;
  animation-duration: 15s;
  animation-iteration-count: infinite;
}

.column {
  float: center;
  width: 50%;
  margin-top: 6px;
  padding: 20px;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.row:after {
  content: "";
  display: table;
  clear: both;
}

@media screen and (max-width: 600px) {
  .column,
  input[type=submit] {
    width: auto;
    margin-top: 0;
  }
}

.shakingErr {
  border-color: red;
  animation: shake 0.82s forwards;
}

@keyframes shake {
  10%,
  90% {
    transform: translate3d(-1px, 0, 0);
  }
  20%,
  80% {
    transform: translate3d(2px, 0, 0);
  }
  30%,
  50%,
  70% {
    transform: translate3d(-4px, 0, 0);
  }
  40%,
  60% {
    transform: translate3d(4px, 0, 0);
  }
}


/* fancy button styles */

.buttonWrapper {
  height: 80px;
  width: 100%;
  position: relative;
}

.button {
  background: #0563bb;
  height: 40px;
  width: 90px;
  text-align: center;
  position: absolute;
  top: 25%;
  transform: translateY(-50%);
  left: 0;
  cursor: pointer;
  border-radius: 1px;
}

.text {
  font: .7rem;
  color: white;
  position: absolute;
  top: 50%;
  transform: translateY(-52%);
  left: 0;
  right: 0;
  cursor: pointer;
}

.progress-bar {
  position: absolute;
  height: 20px;
  width: 0;
  left: 100px;
  top: 25%;
  border-radius: 200px;
  transform: translateY(-50%) translateX(-50%);
  background: #0563bb;
}

svg {
  width: 20px;
  position: absolute;
  top: 25%;
  left: 100px;
  transform: translateY(-50%) translateX(-50%);
}

.check {
  fill: none;
  stroke: #FFFFFF;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.0.2/anime.js">
</script>

<section id="contact">
  <div class="container" data-aos="fade-up">
    <div class="contactform">
      <div class="row">
        <div class="column">
          <form name="myform" action="#" id="my-form" method="POST" novalidate>
            <div class='buttonWrapper'>
              <div class="button">
                <div class="text">Submit</div>
              </div>
              <div class="progress-bar"></div>
              <svg x="0px" y="0px" viewBox="0 0 25 30" style="enable-background:new 0 0 25 30;">
                  <path class="check" class="st0" d="M2,19.2C5.9,23.6,9.4,28,9.4,28L23,2" />
                </svg>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</section>

update

the alignment near the bottom of the contact form is off right after the submit button, how can I fix this?

My output:

Expected Output:

Answer 1

var basicTimeline = anime.timeline({
  autoplay: false,
});

var pathEls = $(".check");
for (var i = 0; i < pathEls.length; i++) {
  var pathEl = pathEls[i];
  var offset = anime.setDashoffset(pathEl);
  pathEl.setAttribute("stroke-dashoffset", offset);
}

basicTimeline
  .add({
    targets: ".text",
    duration: 1,
    opacity: "0"
  })
  .add({
    targets: ".button",
    duration: 1,
    background: "#FFFFFF",
  })
  .add({
    targets: ".button",
    duration: 600,
    height: 20,
    width: 200,
    border: "0",
    background: "#D3D3D3",
    borderRadius: 100
  })
  .add({
    targets: ".progress-bar",
    duration: 2000,
    width: 200,
    easing: "linear"
  })
  .add({
    targets: ".button",
    width: 50,
    height: 50,
    delay: 500,
    duration: 750,
    borderRadius: 80,
    backgroundColor: "#0563bb"
  })
  .add({
    targets: pathEl,
    strokeDashoffset: [offset, 0],
    duration: 200,
    easing: "easeInOutSine",
    complete: () =>
      setTimeout(() => $('#my-form').submit(), 100)
  });


$(".button").click(playButtonAnim);

$(".text").click(playButtonAnim);

function playButtonAnim() {
  basicTimeline.play();
}

/* fancy button styles */

.buttonWrapper {
  height: 80px;
  width: 100%;
  position: relative;
}

.button {
  background: #0563bb;
  height: 40px;
  width: 90px;
  text-align: center;
  position: relative;
  cursor: pointer;
  border-radius: 1px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  white-space: nowrap;
  overflow: hidden
}

.text {
  font: .7rem;
  color: white;
  position: absolute;
  left: 0;
  right: 0;
  cursor: pointer;
}

.progress-bar {
  position:absolute;
  height: 20px;
  width: 0;
  border-radius: 200px;
  background: #0563bb;
  top: 0;
  left: 0;
}

svg {
  position: relative;
  width: 20px;
  margin: 0 auto;
  display: block;
}

.check {
  fill: none;
  stroke: #FFFFFF;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.0.2/anime.js">
</script>

<section id="contact">
  <div class="container" data-aos="fade-up">
    <div class="contactform">
      <div class="row">
        <div class="column">
          <form name="myform" action="#" id="my-form" method="POST" novalidate>
            <div class='buttonWrapper'>
              <div class="button">
                <div class="text">Submit</div>
              <div class="progress-bar"></div>
                          <svg x="0px" y="0px" viewBox="0 0 25 30" style="enable-background:new 0 0 25 30;">
                  <path class="check" class="st0" d="M2,19.2C5.9,23.6,9.4,28,9.4,28L23,2" />
                </svg>
                            </div>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</section>