Bootstrap 4 form with animated button

by budyniowski

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA==" crossorigin="anonymous" />
<div class="container">
<h2 id="formTitle">
Form Title
</h2>
  <form>

    <div class="form-label-group">
      <input type="text" class="form-control" id="field1" placeholder="Field 1">
      <label for="field1">Field 1</label>
    </div>
    <div class="form-label-group">
      <input type="text" class="form-control" id="field2" placeholder="Field 2">
      <label for="field2">Field 2</label>
    </div>
    <div class="form-label-group">
      <input type="text" class="form-control" id="field3" placeholder="Field 3">
      <label for="field3">Field 3</label>
    </div>
    <div class="form-label-group">
      <input type="text" class="form-control" id="field4" placeholder="Field 4">
      <label for="field4">Field 4</label>
    </div>
    <div class="form-label-group">
      <input type="text" class="form-control" id="field5" placeholder="Field 5">
      <label for="field5">Field 5</label>
    </div>

    <div class="btn-animated-container">
      <div class="btn-animated-grp">
        <div class="btn-animated-background"></div>
        <button class="btn-animated">
          <span>
            Submit
            <i class="fas fa-paper-plane" aria-hidden="true"></i>
          </span>
        </button>
      </div>
    </div>
  </form>
</div>

CSS

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.container h2 {
  margin-bottom: 1.5rem;
}

form {
  margin-top: 1em;
}

form .form-control {
  border-radius: 0;
  outline: none;
  -webkit-transition: all .4s;
  -o-transition: all .4s;
  -moz-transition: all .4s;
  transition: all .4s;
  font-size: 1.5rem;
  line-height: 1.5rem;
  padding-bottom: .5rem;
  border: none;
  border-bottom: 1px solid #ced4da;
}

form .form-control:focus,
form .form-control:active {
  border-color: none;
  box-shadow: none;
  outline: none;
  border-color: #fefefe;
}

form .form-label-group::after {
  display: block;
  content: '';
  border-bottom: solid 2px rgba(0, 0, 0, 0.5);
  transform: scaleX(0);
  transition: transform 250ms ease-in-out;
      position: relative;
    top: -1px;
}

form .form-label-group:focus-within::after {
  transform: scaleX(1);
}

form .form-control:hover {
  border-color: #ced4da;
  box-shadow: none;
  outline: none;
  -webkit-transition: all .4s;
  -o-transition: all .4s;
  -moz-transition: all .4s;
  transition: all .4s;
}




/* Animated Button */
button {
  outline: none !important;
  border: none;
  background: 0 0;
}

button:hover {
  cursor: pointer;
}

.btn-animated-container {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  padding-top: 13px;
}

.btn-animated-grp {
  width: 100%;
  display: block;
  position: relative;
  z-index: 1;
  border-radius: 25px;
  overflow: hidden;
  margin: 0 auto;
}

.btn-animated-background {
  position: absolute;
  z-index: -1;
  width: 300%;
  height: 100%;
  background: #a64bf4;
  background: -webkit-linear-gradient(left, rgba(0, 219, 222, 1), rgba(252, 0, 255, 1), rgba(0, 219, 222, 1), rgba(252, 0, 255, 1));
  background: -o-linear-gradient(left, rgba(0, 219, 222, 1), rgba(252, 0, 255, 1), rgba(0, 219, 222, 1), rgba(252, 0, 255, 1));
  background: -moz-linear-gradient(left, rgba(0, 219, 222, 1),...