Bootstrap 4 form - single color 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=" ">
      <label for="field1">Name</label>
    </div>
    <div class="form-label-group">
      <input type="text" class="form-control" id="field2" placeholder=" ">
      <label for="field2">Surname</label>
    </div>
    <div class="form-label-group">
      <input type="text" class="form-control" id="field3" placeholder=" ">
      <label for="field3">City</label>
    </div>
    <div class="form-label-group">
      <input type="text" class="form-control" id="field4" placeholder=" ">
      <label for="field4">ZIP Code</label>
    </div>
    <div class="form-label-group">
      <input type="text" class="form-control" id="field5" placeholder=" ">
      <label for="field5">Address</label>
    </div>

    <div class="btn-animated-container">
      <div class="btn-animated-grp">
        <div class="btn-animated-background"></div>
        <button class="btn-animated btn-small">
          <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;
  
  --btn-accent-color: rgba(0, 200, 255, 1);
  --text-indent: 0.25rem;
}

.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;
  text-indent: var(--text-indent);
  /* background-color: rgba(0, 0, 0, .025); */
}

form .form-control:focus,
form .form-control:active {
  border-color: none;
  box-shadow: none;
  outline: none;
  border-color: var(--btn-accent-color);
  /* background-color: rgba(0, 0, 0, .025); */
}

form .form-label-group::after {
  display: block;
  content: '';
  border-bottom: solid 2px var(--btn-accent-color);
  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: var(--btn-accent-color);
  box-shadow: none;
  outline: none;
  -webkit-transition: all .4s;
  -o-transition: all .4s;
  -moz-transition: all .4s;
  transition: all .4s;
  cursor: pointer;
}




/* 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: flex-end;
  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 {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
/*   justify-content: center;
 ...