Why does my button not work after adding a template?(Worked Before)

Question

and thank you. I have been making a website. I put a template on the submit button to make it look nicer. Ever since it has only worked when I press it in a specific spot, and even then it doesn't work all the time. When pressed it logs you into flask-login with my Flask-Sqlalchemy database, and redirects to a logged in page.

Here is the button, and form:

@import url("https://fonts.googleapis.com/css?family=Montserrat");
body {
  background: #2f2f31;
  transform: rotateX(0.003deg);
  height: 100vh;
  color: #fff;
}
.a {
  position: absolute;
  left: 50%;
  top: 90%;
  transform: translate(-50%, -50%);
  color: #cecd24;
  text-decoration: none;
  font-size: 1.2em;
  display: inline-block;
  font-family: Montserrat;
  text-transform: uppercase;
  padding: 0.3em 1.2em;
  border: 2px solid #cecd24;
  transition: 0.02s 0.2s cubic-bezier(0.1, 0, 0.1, 1);
}
.a::before {
  content: "";
  display: inline-block;
  position: absolute;
  top: 0;
  left: 0;
  right: 100%;
  bottom: 0;
  background: #cecd24;
  transition: 0.3s 0.2s cubic-bezier(0.1, 0, 0.1, 1), left 0.3s cubic-bezier(0.1, 0, 0.1, 1);
  z-index: -1;
}
.a::after {
  content: "";
  display: inline-block;
  background-image: url("https://image.flaticon.com/icons/png/128/109/109617.png");
  position: absolute;
  top: 0;
  left: calc(100% - 3em);
  right: 3em;
  bottom: 0;
  background-size: 1.5em;
  background-repeat: no-repeat;
  background-position: center;
  transition: right 0.3s cubic-bezier(0.1, 0, 0.1, 1);
}
.a:hover {
  padding: 0.5em 3.5em 0.5em 0.5em;
}
.a:hover::before {
  left: calc(100% - 3em);
  right: 0;
  transition: 0.3s cubic-bezier(0.1, 0, 0.1, 1), left 0.3s 0.2s cubic-bezier(0.1, 0, 0.1, 1);
}
.a:hover::after {
  right: 0;
  transition: right 0.3s 0.2s cubic-bezier(0.1, 0, 0.1, 1);
}

<div class="container" onclick="onclick">
  <div class="top"></div>
  <div class="bottom"></div>
  <div class="center">
    <h2>Please Sign In</h2>
    <form method='post'>
      <input type="email" name="email_login" placeholder="email"/>
      <input type="username" name="username_login" placeholder="username">
      <input type="password" name="password_login" placeholder="password"/>
      <select  name='remember'>
                <option value="remember"> Remember Me</option>
                <option value="don't">Don't remember. Database has a bad memory</option>
        </select>
        <button class="a" type="submit" name="submit" id="submit">Submit</button>
    </form> 
    <h2>&nbsp;</h2>
  </div>
</div>

NOTE: It was originally SCSS, but I compiled it with an online compiler to use it with flask easily. I can also add the flask code it is connected to if needed!

Any help would be appreciated. Thank You!

Answer 1

For whatever reason, the code kind of magically started working again. I didn't change anything, but now when I press the button it works. Thank you everyone for your help!