the button tag (html) is not submitting the form

i am making a form and the button tag can someone help me! the following is all my code the js is for the loading symbol mostly everything else is css the button is Submit my browser is chrome i am suspecting that the data-label="submit" in the html is the reason

but i have no idea how to fix it

var loading = function(e) {
  e.preventDefault();
  e.stopPropagation();
  e.target.classList.add('loading');
  e.target.setAttribute('disabled', 'disabled');
  setTimeout(function() {
    e.target.classList.remove('loading');
    e.target.removeAttribute('disabled');
  }, 1500);
};

var btns = document.querySelectorAll('button');
for (var i = btns.length - 1; i >= 0; i--) {
  btns[i].addEventListener('click', loading);
}

html,
body {
  padding: 0;
  margin: 0;
  background: #fafafa;
  text-align: center;
}
body {
  padding-top: 4em;
}
h1 {
  margin-bottom: 3rem;
  font-family: sans-serif;
  color: #666;
}
button {
  position: relative;
  border: 0;
  margin: 0;
  padding: 0;
  cursor: pointer;
  font-size: 1rem;
  font-weight: bold;
  color: rgba(0, 0, 0, 0);
  background: transparent;
  border-radius: .25rem;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-touch-callout: none;
}
button,
button:after,
button:before {
  padding: .6875rem 2rem;
  -webkit-transition: -webkit-transform 0.75s, background-color .125s;
  -moz-transition: -moz-transform 0.75s, background-color .125s;
  -ms-transition: -ms-transform 0.75s, background-color .125s;
  transition: transform 0.75s, background-color .125s;
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -ms-transform-style: preserve-3d;
  transform-style: preserve-3d;
}
button:after,
button:before {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  border-radius: .25rem;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -ms-backface-visibility: hidden;
  backface-visibility: hidden;
}
button:before {
  z-index: 2;
  color: #fff;
  background-color: #3e87ec;
  content: attr(data-label);
}
button:after {
  z-index: 1;
  background-color: #999;
  background-repeat: no-repeat;
  background-position: center center;
  background-image: url(data:image/gif;base64,R0lGODlhEAAQAPIAAJmZmf///7CwsOPj4////9fX18rKysPDwyH+GkNyZWF0ZWQgd2l0aCBhamF4bG9hZC5pbmZvACH5BAAKAAAAIf8LTkVUU0NBUEUyLjADAQAAACwAAAAAEAAQAAADMwi63P4wyklrE2MIOggZnAdOmGYJRbExwroUmcG2LmDEwnHQLVsYOd2mBzkYDAdKa+dIAAAh+QQACgABACwAAAAAEAAQAAADNAi63P5OjCEgG4QMu7DmikRxQlFUYDEZIGBMRVsaqHwctXXf7WEYB4Ag1xjihkMZsiUkKhIAIfkEAAoAAgAsAAAAABAAEAAAAzYIujIjK8pByJDMlFYvBoVjHA70GU7xSUJhmKtwHPAKzLO9HMaoKwJZ7Rf8AYPDDzKpZBqfvwQAIfkEAAoAAwAsAAAAABAAEAAAAzMIumIlK8oyhpHsnFZfhYumCYUhDAQxRIdhHBGqRoKw0R8DYlJd8z0fMDgsGo/IpHI5TAAAIfkEAAoABAAsAAAAABAAEAAAAzIIunInK0rnZBTwGPNMgQwmdsNgXGJUlIWEuR5oWUIpz8pAEAMe6TwfwyYsGo/IpFKSAAAh+QQACgAFACwAAAAAEAAQAAADMwi6IMKQORfjdOe82p4wGccc4CEuQradylesojEMBgsUc2G7sDX3lQGBMLAJibufbSlKAAAh+QQACgAGACwAAAAAEAAQAAADMgi63P7wCRHZnFVdmgHu2nFwlWCI3WGc3TSWhUFGxTAUkGCbtgENBMJAEJsxgMLWzpEAACH5BAAKAAcALAAAAAAQABAAAAMyCLrc/jDKSatlQtScKdceCAjDII7HcQ4EMTCpyrCuUBjCYRgHVtqlAiB1YhiCnlsRkAAAOwAAAAAAAAAAAA==);
  -webkit-transform: rotateX(180deg);
  -moz-transform: rotateX(180deg);
  -ms-transform: rotateX(180deg);
  transform: rotateX(180deg);
  content: '';
}
button:active:before {
  background-color: #3571c8;
}
button.loading {
  -webkit-transform: rotateX(180deg);
  -moz-transform: rotateX(180deg);
  -ms-transform: rotateX(180deg);
  transform: rotateX(180deg);
}
/* This is the button */

.form-style-1 {
  margin: 10px auto;
  max-width: 400px;
  padding: 20px 12px 10px 20px;
  font: 13px"Lucida Sans Unicode", "Lucida Grande", sans-serif;
}
.form-style-1 li {
  padding: 0;
  display: block;
  list-style: none;
  margin: 10px 0 0 0;
}
.form-style-1 label {
  margin: 0 0 3px 0;
  padding: 0px;
  display: block;
  font-weight: bold;
}
.form-style-1 input[type=text],
.form-style-1 input[type=date],
.form-style-1 input[type=datetime],
.form-style-1 input[type=number],
.form-style-1 input[type=search],
.form-style-1 input[type=time],
.form-style-1 input[type=url],
.form-style-1 input[type=email],
textarea,
select {
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  border: 1px solid #BEBEBE;
  padding: 7px;
  margin: 0px;
  -webkit-transition: all 0.30s ease-in-out;
  -moz-transition: all 0.30s ease-in-out;
  -ms-transition: all 0.30s ease-in-out;
  -o-transition: all 0.30s ease-in-out;
  outline: none;
}
.form-style-1 input[type=text]:focus,
.form-style-1 input[type=date]:focus,
.form-style-1 input[type=datetime]:focus,
.form-style-1 input[type=number]:focus,
.form-style-1 input[type=search]:focus,
.form-style-1 input[type=time]:focus,
.form-style-1 input[type=url]:focus,
.form-style-1 input[type=email]:focus,
.form-style-1 textarea:focus,
.form-style-1 select:focus {
  -moz-box-shadow: 0 0 8px #88D5E9;
  -webkit-box-shadow: 0 0 8px #88D5E9;
  box-shadow: 0 0 8px #88D5E9;
  border: 1px solid #88D5E9;
}
.form-style-1 .field-divided {
  width: 49%;
}
.form-style-1 .field-long {
  width: 100%;
}
.form-style-1 .field-select {
  width: 100%;
}
.form-style-1 .field-textarea {
  height: 100px;
}
.form-style-1 input[type=submit],
.form-style-1 input[type=button] {
  background: #4B99AD;
  padding: 8px 15px 8px 15px;
  border: none;
  color: #fff;
}
.form-style-1 input[type=submit]:hover,
.form-style-1 input[type=button]:hover {
  background: #4691A4;
  box-shadow: none;
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
}
.form-style-1 .required {
  color: red;
}

<html>

<head>
  <title></title>
</head>

<body>
  <form>
    <ul class="form-style-1">
      <li>
        <label>Full Name
          <span class="required">*</span>
        </label>
        <input class="field-divided" name="field1" placeholder="First" required="" type="text" required>&nbsp;
        <input class="field-divided" name="field2" placeholder="Last" type="text">
      </li>
      <li>
        <label>Email
          <span class="required">*</span>
        </label>
        <input class="field-long" name="field3" type="email">
      </li>
      <li>
        <label>Reason of use
          <span class="required">*</span>
        </label>
        <select class="field-select" name="field4">
          <option value="Advertise">Advertise</option>
          <option value="Partnership">Education</option>
          <option value="General Question">General</option>
        </select>
      </li>
      <li>
        <label>Any questions?</label>
        <textarea class="field-long field-textarea" id="field5" name="field5">
        </textarea>
      </li>
      <li>
        <button data-label="Submit" type="submit">Submit</button>
      </li>
    </ul>
  </form>
</body>

</html>