Sign In Button

HTML
 <button class="signinbtn" onclick="document.getElementById('id01').style.display='block'; ">Sign In</button>

 <div style="display: none ;" id="id01" class="login-form">

            <form Style="border: solid 2px #FFF; box-shadow: 300px;" class="loginform-content" action="/action_page.php">
            <span onclick="document.getElementById('id01').style.display='none'" class="close" title="closeloginform" style="color: white; float: right; ">&times;
            </span>
            <div class="logincontainer">
                <hi style="font-size: 30px; color: white;">Sign In</hi>
                <p style="color: white;">Key in Username and Password..</p>
                <hr>
                <label style="color: white;" for="username"><b>Username:</b></label>
                <br>
                <input id="usernametxtbox" type="text" placeholder="Username or Email.." name="Username/Email" required>
                <br>

                <label style="color: white;" for="password"><b>Password:</b></label>
                <br>
                <input id="passwordtxtbox" type="password" placeholder="Password.." name="password" required>
                <br>
                <input  type="checkbox" onclick="showpassword()" value="Show Password">Show password
                <br>
                <br>
                <input  type="submit" value="Log In">
                <br>
                <br>
                 <a href="Signup.html"><input type="button" value="Sign Up" > </a>
                </div>
            </form>
        </div>

CSS
<style>
.login-form
{
    animation-name: LoginFadein;
    animation-duration: 1s;

}

@keyframes LoginFadein
{
    From{opacity: 0}
    to{opacity: 1}
}

 #LoginNav
{
    margin: 0px;
}

.signinbtn{
    float:right;
    background-color: #abaeb2 ;
    color: white;
    margin: 20px;
    padding: 11px 35px 11px 35px;
    margin: 0px 0px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    width: 100%;
    opacity: 0.9;
    border: solid 1px #FFF;


}

.signinbtn:hover{

    border-color: black;
    color: White;
}

.loginform-content
{
    border-radius: 0px;
}

.loginlabel p{
    font-size: 50px;
    font-weight: 800;

}

.lblbox{
    font-size: 20;
    opacity: 0.70;
}

 #username, #Password{
    border-radius: 5px;
    background-color: #f2f2f2;
    padding:20px;
     padding-right: 70px;
}

input[type=submit] ,input[type=button] {
    width: 263;
    background-color: #abaeb2;
    color: #FFF;
    padding:14px 10px ;
    margin: 8px, 0px;
    border: solid 1px #FFF;

    border-radius: 5px;
    cursor:pointer;
}



.logincontainer
{
    color: white;
}

input[type=submit]:hover, input[type=button]:hover{

    background-color: none;
    color: black;
   border-color: black;
}



.login-form{
    display: none;
    position: fixed;
    z-index: 1;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    padding-top: 50px;
    background-color: black;

}

.loginform-content {
    background-color: grey;
    margin: 5% auto 15% auto;
    padding: 13px 13px 13px   ;
    border: 1px solid black;
    width: 15.5%;
    border-radius: 5px;
}

hr{
    border: 1px solid #f1f1f1;


    margin-bottom: 25px;
}


 input[type=text], input[type=password]{
border-radius: 5px;
    background-color: #f2f2f2;
    padding:20px;
     padding-right: 70px;
}

input[type=checkbox]{
    color: white;
}

</style>