Thank you for your assistance. I've been working on a website where I added a template to the submit button to enhance its appearance. However, I've encountered an issue where the button only functions when clicked in a specific area and even then, it's not consistent. Upon clicking, it logs the user into flask-login using my Flask-Sqlalchemy database and redirects to a logged-in page.
Below is the code for 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> </h2>
</div>
</div>Note: The original code was in SCSS format but was compiled through an online compiler to facilitate integration with Flask. I can share the flask code connected to it if necessary!
I would greatly appreciate any assistance. Thank you!