Attempting to create a button in the bottom right corner that will reveal a form when clicked or hovered over. The form should slide open slowly and close after clicking on login, but currently the button is moving down as the form opens.
The button also needs to be positioned on the right side. Tried using float:right; and right:0; to no avail.
Below is the code snippet:
function showForm(){
document.getElementById('loginForm').style.display = "block";
}
function hideForm(){
document.getElementById('loginForm').style.display = "none";
}*{
margin: 0;
padding: 0;
box-sizing: border-box
}
.no-show{display:none;}
.form-container {
position:absolute;
bottom:0;
right:0;
float: right;
width:100%;
}
body { font-family: tahoma; }
#loginForm {
display: none;
background: #ccc;
width: 250px;
height: 100px;
padding: 20px;
color: #333;
}
.label {
cursor: pointer;
display:block;
padding: 5px 15px;
font-size: 16px;
font-weight: bold;
}
.form-label {
width: 70px;
font-size: 12px;
font-weight: bold;
}
.form-field {
width: 180px;
}
.form-elements {
font-size: 0px;
margin: 10px 0 0 0;
display: block;
}
.form-label, .form-field {
display: inline-block;
}
.form-field input {
padding: 3px 5px;
}
.submit-btn input {
margin-left: 70px;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-container">
<form>
<p id="login" onmouseover="showForm();" onmouseout="hideForm();">
<span class="label">Login</span>
<span id="loginForm">
<span class="form-elements">
<span class="form-label">Name:</span>
<span class="form-field"><input type="name" /></span>
</span>
<span class="form-elements">
<span class="form-label">Password:</span>
<span class="form-field"><input type="password" /></span>
</span>
</span>
</p>
</form>
</div>Check out the live demo here - https://jsfiddle.net/d5L8bywk/1/
The form should smoothly open upwards and close upon clicking the login button.
It should resemble this design: https://i.sstatic.net/cXpcw.png