Replacing element in html/css-CodePudding

I have the following contact form:

/* Contact Form */

input[type=text],
[type=email],
select,
textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid #555;
  margin-top: 6px;
  margin-bottom: 16px;
  resize: vertical;
}

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

input[type="text"]:focus,
input[type="email"]:focus,
#subject:focus {
  background: var(--bgFormElsFocus);
  transform: scale(1.02);
  transition: transform 0.2s ease-in-out;
}

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);
  }
}

<!-- start contact section -->
<section id="contact">
  <div  data-aos="fade-up">
    <div >
      <div style="text-align:center">
        <div >
          <h2><br/>Get In Touch</h2>
        </div>
        <p>Feel Free To Reach Out To Me Through This Form! </p>
      </div>
      <div >
        <div >
          <form name="myform" action="https://formspree.io/f/xrg123232jbqpq" id="my-form" method="POST" novalidate>
            <label for="firstname">First Name</label>
            <input type="text" id="first name" name="firstname" placeholder="Your First Name.." required>
            <label for="lastname">Last Name</label>
            <input type="text" id="lastname" name="lastname" placeholder="Your Last Name.." required>
            <label for="email">Email:</label>
            <input type="email" id="email" name="email" placeholder="Your Email.." required>
            <label for="subject">Subject</label>
            <textarea id="subject" name="subject" placeholder="Lets Collaborate.." style="height:170px" required></textarea>
            <input type="submit" value="Submit">
          </form>
        </div>
      </div>
    </div>
  </div>
</section>
<!-- End Contact Section -->

Basically, I would like to change the Submit button and replace it with this button:

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: 1300,
    height: 20,
    width: 300,
    backgroundColor: "#2B2D2F",
    border: "0",
    borderRadius: 100
  })
  .add({
    targets: ".progress-bar",
    duration: 2000,
    width: 300,
    easing: "linear"
  })
  .add({
    targets: ".button",
    width: 0,
    duration: 1
  })
  .add({
    targets: ".progress-bar",
    width: 80,
    height: 80,
    delay: 500,
    duration: 750,
    borderRadius: 80,
    backgroundColor: "#71DFBE"
  })
  .add({
    targets: pathEl,
    strokeDashoffset: [offset, 0],
    duration: 200,
    easing: "easeInOutSine"
  });

$(".button").click(function() {
  basicTimeline.play();
});

$(".text").click(function() {
  basicTimeline.play();
});

body {
  background: #1D1F20;
}
main {
  height: 100vh;
  width: 100vw;
}

.button {
  background: #2B2D2F;
  height: 80px;
  width: 200px;
  text-align: center;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 0;
  right: 0;
  margin: 0 auto;
  cursor: pointer;
  border-radius: 4px;
}

.text {
  font: bold 1.25rem/1 poppins;
  color: #71DFBE;
  position: absolute;
  top: 50%;
  transform: translateY(-52%);
  left: 0;
  right: 0;
}

.progress-bar {
  position: absolute;
  height: 20px;
  width: 0;
  right: 0;
  top: 50%;
  left: 50%;
  border-radius: 200px;
  transform: translateY(-50%) translateX(-50%);
  background: lighten(#2B2D2F, 15%);
}

svg {
  width: 30px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%) translateX(-50%);
  left: 50%;
  right: 0;
}

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

<link href="https://fonts.googleapis.com/css?family=Poppins:600" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.0.2/anime.js"></script>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>

<main>
  <div >
    <div >Submit</div>
  </div>
  <div ></div>
  <svg x="0px" y="0px"
     viewBox="0 0 25 30" style="enable-background:new 0 0 25 30;">
    <path   d="M2,19.2C5.9,23.6,9.4,28,9.4,28L23,2"/>
  </svg>
</main>

I'm looking to just replace the contact form button with the new button that I have in the code above. It should be the exact size, width and height as the previous Submit button that I currently have in the contact form. Any suggestions on how I can accomplish this? Thanks a lot.

The code might seem long but the only class or property that controls the button in the contact form is this:

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

CodePudding user response：

If you want button on left:

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: 1300,
    height: 20,
    width: 200,
    backgroundColor: "#717F7E",
    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: 80,
    height: 80,
    delay: 500,
    duration: 750,
    borderRadius: 80,
    backgroundColor: "#71DFBE"
  })
  .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();
}

/* Contact Form */

input[type=text],
[type=email],
select,
textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid #555;
  margin-top: 6px;
  margin-bottom: 16px;
  resize: vertical;
}

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

input[type="text"]:focus,
input[type="email"]:focus,
#subject:focus {
  background: var(--bgFormElsFocus);
  transform: scale(1.02);
  transition: transform 0.2s ease-in-out;
}

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: #2B2D2F;
  height: 80px;
  width: 200px;
  text-align: center;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 0;
  cursor: pointer;
  border-radius: 4px;
}

.text {
  font: bold 1.25rem/1 poppins;
  color: #71DFBE;
  position: absolute;
  top: 50%;
  transform: translateY(-52%);
  left: 0;
  right: 0;
  cursor: pointer;
}

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

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

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

<link href="https://fonts.googleapis.com/css?family=Poppins:600" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.0.2/anime.js"></script>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>

<!-- start contact section -->
<section id="contact">
  <div  data-aos="fade-up">
    <div >
      <div style="text-align:center">
        <div >
          <h2><br />Get In Touch</h2>
        </div>
        <p>Feel Free To Reach Out To Me Through This Form! </p>
      </div>
      <div >
        <div >
          <form name="myform" action="https://formspree.io/f/xrg123232jbqpq" id="my-form" method="POST" novalidate>
            <label for="firstname">First Name</label>
            <input type="text" id="first name" name="firstname" placeholder="Your First Name.." required>
            <label for="lastname">Last Name</label>
            <input type="text" id="lastname" name="lastname" placeholder="Your Last Name.." required>
            <label for="email">Email:</label>
            <input type="email" id="email" name="email" placeholder="Your Email.." required>
            <label for="subject">Subject</label>
            <textarea id="subject" name="subject" placeholder="Lets Collaborate.." style="height:170px" required></textarea>
            <!-- input type="submit" value="Submit" -->
            <div class='buttonWrapper'>
              <div >
                <div >Submit</div>
              </div>
              <div ></div>
              <svg x="0px" y="0px" viewBox="0 0 25 30" style="enable-background:new 0 0 25 30;">
                  <path   d="M2,19.2C5.9,23.6,9.4,28,9.4,28L23,2" />
                </svg>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</section>

Note, how I've submitted the form:

  .add({
    targets: pathEl,
    ...
    complete: () =>
      setTimeout(() => $('#my-form').submit(), 100)
  });

If you want to have button at center with original dimentions then try this:

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: 1300,
    height: 20,
    width: 300,
    backgroundColor: "#717F7E",
    border: "0",
    borderRadius: 100
  })
  .add({
    targets: ".progress-bar",
    duration: 2000,
    width: 300,
    easing: "linear"
  })
  .add({
    targets: ".button",
    width: 0,
    duration: 1
  })
  .add({
    targets: ".progress-bar",
    width: 80,
    height: 80,
    delay: 500,
    duration: 750,
    borderRadius: 80,
    backgroundColor: "#71DFBE"
  })
  .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();
}

/* Contact Form */

input[type=text],
[type=email],
select,
textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid #555;
  margin-top: 6px;
  margin-bottom: 16px;
  resize: vertical;
}

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

input[type="text"]:focus,
input[type="email"]:focus,
#subject:focus {
  background: var(--bgFormElsFocus);
  transform: scale(1.02);
  transition: transform 0.2s ease-in-out;
}

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: #2B2D2F;
  height: 80px;
  width: 200px;
  text-align: center;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 0;
  right: 0;
  margin: 0 auto;
  cursor: pointer;
  border-radius: 4px;
}

.text {
  font: bold 1.25rem/1 poppins;
  color: #71DFBE;
  position: absolute;
  top: 50%;
  transform: translateY(-52%);
  left: 0;
  right: 0;
  cursor: pointer;
}

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

svg {
  width: 30px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%) translateX(-50%);
  left: 50%;
  right: 0;
}

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

<link href="https://fonts.googleapis.com/css?family=Poppins:600" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.0.2/anime.js"></script>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>

<!-- start contact section -->
<section id="contact">
  <div  data-aos="fade-up">
    <div >
      <div style="text-align:center">
        <div >
          <h2><br />Get In Touch</h2>
        </div>
        <p>Feel Free To Reach Out To Me Through This Form! </p>
      </div>
      <div >
        <div >
          <form name="myform" action="https://formspree.io/f/xrg123232jbqpq" id="my-form" method="POST" novalidate>
            <label for="firstname">First Name</label>
            <input type="text" id="first name" name="firstname" placeholder="Your First Name.." required>
            <label for="lastname">Last Name</label>
            <input type="text" id="lastname" name="lastname" placeholder="Your Last Name.." required>
            <label for="email">Email:</label>
            <input type="email" id="email" name="email" placeholder="Your Email.." required>
            <label for="subject">Subject</label>
            <textarea id="subject" name="subject" placeholder="Lets Collaborate.." style="height:170px" required></textarea>
            <!-- input type="submit" value="Submit" -->
            <div class='buttonWrapper'>
              <div >
                <div >Submit</div>
              </div>
              <div ></div>
              <svg x="0px" y="0px" viewBox="0 0 25 30" style="enable-background:new 0 0 25 30;">
                  <path   d="M2,19.2C5.9,23.6,9.4,28,9.4,28L23,2" />
                </svg>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</section>

CodePudding user response：

My suggestion is to simply combine the two, and insert the html for the new btn after the html for the old btn on the same file.

To allow the background of the new btn to stay the same while scaling the .main wrapper up or down, I put a wrapper around the new btn called '.fancy-btn-wrapper'.

In the CSS, I changed the form's position to absolute, so that the new button could overlay on top of the form.

I then used transform: translate() and transform: scale() to move the button to cover over the button on the form.

/* ------------------- */

Finally, I used the Javascript to query select various elements from the form and the new button. (I am not as familiar with jQuery, so I used vanilla Javascript mixed in with the jQuery)

There is a function called buttonCenter() included in the Javascript that resizes the new button container back to full screen upon clicking. However, you can simply comment out the call to that function if you prefer the button to remain small during its svg animation, versus growing to take up the whole screen.

You will also notice that I set the btn on the form to opacity: 0, so that the new button is the only element that you see.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://fonts.googleapis.com/css?family=Poppins:600" rel="stylesheet">
    <!-- <link rel="stylesheet" href="./button.css"> -->
    <title>Button</title>
</head>
<body>
    <!-- start contact section -->
    <style>
        /* border-box to simplify margin/padding issues */
* {
    box-sizing: border-box;
}

/* new btn styling */

.fancy-btn-wrapper {
    background: #1D1F2000;
}

main {
    height: 100vh;
    width: 100vw;
    background: #1D1F2000;

    transform: scale(.45) translate(-42%, 95%); /**/
}

.button {
    background: #2B2D2F;
    height: 80px;
    width: 200px;
    text-align: center;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
    right: 0;
    margin: 0 auto;
    cursor: pointer;
    border-radius: 4px;

}

.text {
    font: bold 1.25rem/1 poppins;
    color: #71DFBE;
    position: absolute;
    top: 50%;
    transform: translateY(-52%);
    left: 0;
    right: 0;
}

.progress-bar {
    position: absolute;
    height: 20px;
    width: 0;
    right: 0;
    top: 50%;
    left: 50%;
    border-radius: 200px;
    transform: translateY(-50%) translateX(-50%);
    background: lighten(#2B2D2F, 15%);
}

svg {
    width: 30px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%) translateX(-50%);
    left: 50%;
    right: 0;
}

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




/* Contact Form */

#contact {
    position: absolute;
    opacity: 1;
    z-index: 0;
}

input[type=text],
[type=email],
select,
textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid #555;
  margin-top: 6px;
  margin-bottom: 16px;
  resize: vertical;
}

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

input[type="text"]:focus,
input[type="email"]:focus,
#subject:focus {
  background: var(--bgFormElsFocus);
  transform: scale(1.02);
  transition: transform 0.2s ease-in-out;
}

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);
  }
}

.form-submit-btn {
    opacity: 0;
}
    </style>

    <section id="contact">
        <div  data-aos="fade-up">
        <div >
            <div style="text-align:center">
            <div >
                <h2><br/>Get In Touch</h2>
            </div>
            <p>Feel Free To Reach Out To Me Through This Form! </p>
            </div>
            <div >
            <div >
                <form name="myform"  action="none" id="my-form" method="POST" novalidate></form>
                <label for="firstname">First Name</label>
                <input type="text" id="first name" name="firstname" placeholder="Your First Name.." required>
                <label for="lastname">Last Name</label>
                <input type="text" id="lastname" name="lastname" placeholder="Your Last Name.." required>
                <label for="email">Email:</label>
                <input type="email" id="email" name="email" placeholder="Your Email.." required>
                <label for="subject">Subject</label>
                <textarea id="subject" name="subject" placeholder="Lets Collaborate.." style="height:170px" required></textarea>
                <input  type="submit" value="Submit">
                </form>
            </div>
            </div>
        </div>
        </div>
    </section>

    <div >
        <main>
            <div >
                <div >Submit</div>
            </div>
            <div ></div>
            <svg x="0px" y="0px"
                viewBox="0 0 25 30" style="enable-background:new 0 0 25 30;">
                <path   d="M2,19.2C5.9,23.6,9.4,28,9.4,28L23,2"/>
            </svg>
        </main>
    </div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.0.2/anime.js"></script>
    <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
    <script>
    
    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: 1300,
          height: 20,
          width: 300,
          backgroundColor: "#2B2D2F",
          border: "0",
          borderRadius: 100
        })
        .add({
          targets: ".progress-bar",
          duration: 2000,
          width: 300,
          easing: "linear"
        })
        .add({
          targets: ".button",
          width: 0,
          duration: 1
        })
        .add({
          targets: ".progress-bar",
          width: 80,
          height: 80,
          delay: 500,
          duration: 750,
          borderRadius: 80,
          backgroundColor: "#71DFBE"
        })
        .add({
          targets: pathEl,
          strokeDashoffset: [offset, 0],
          duration: 200,
          easing: "easeInOutSine"
        });
    
    let contactForm = document.getElementById('contact');
    let animatedButton = document.querySelector('main');
    let form = document.querySelector('.myform');
    let formSubmit = document.querySelector('.form-submit-btn');
    
    let newButton = document.querySelector('.button');
    
    
    function buttonCenter() {
        contactForm.style.transition = 'opacity .5s ease-out';
        contactForm.style.opacity = '0';
    
        animatedButton.style.transition = 'transform 1s ease, background-color 1s ease';
        animatedButton.style.transform = 'translate(0%, 0%) scale(1)';
        animatedButton.style.backgroundColor = '#1D1F20'
    }
    
    function submitForm() {
        formSubmit.submit();
    }
    
    function newButtonPressFunction() {
    
        basicTimeline.play();
    
        buttonCenter();
    
        setTimeout(() => {
            setAttribute("action","https://formspree.io/f/xrgjbqpq");
            submitForm();
        },7000)
    }
    
    newButton.addEventListener('click', function(){
        newButtonPressFunction();
    })
    
    
      $(".button").click(function() {
        basicTimeline.play();
      });
      
      $(".text").click(function() {
        basicTimeline.play();
      });
    
      $(".progress-bar").click(function() {
        basicTimeline.play();
      });
      </script>
</body>
</html>

/* —----------------- */

This is a very quick/rough version of fixing your problem. The colors in the button animation would have to be changed to account for the lighter colors in the new form background -- that is unless you prefer to use the buttonCenter() function, which allows the new Button animation to grow back to a normal full screen size.

You will also want to find a way to center the new overlayed btn inside of the form so that it doesn't move around so much when you resize the screen.