I've been working on a html login page just for fun O_O didn't know what to do with it when I was done so anyone who wants to use it and edit it, go ahead :3. I made it personally for Google Chrome so I'm not sure if the css will work very well with the other browsers >_> I don't really care. Make as many changes as you want. Here's how it looks like : http://flycom.webs.com/Login.htm

  <div id="login">

Log In

<input class="user" name="username" placeholder="Username" type="text"/></br>
<input class="pass" name="password" type="password" placeholder="Password"/></br>
<a href="/#" class="forgot">Forgot Password?</a></br>
<input type="Submit" class="enter" name="signin" value="SIGN IN"/>

</div>



<style>
body {
font-family:Sans-Serif;
background-color:#4c4c4c;
}
div#login {
border:1px solid #949494;
width:15%;
margin:0 auto;
text-align:center;
padding:28px 23px;
padding-top:0px;
margin-top:0px;
border-radius:10px;
box-shadow:0px 0px 3px rgba(0, 0, 0, .25), inset 3px -3px 4px rgba(0, 0, 0, .2);
background-color:#F5F5F5;
margin-top:50px;
border:7px solid rgba(0, 0, 0, .0001);
background-clip:padding-box;
}
input[type="text"], input[type="password"] {
padding:10px 30px;
border-radius:7px;
border:1px solid #949494;
background: url('http://i.imgur.com/TjQeI2X.png') no-repeat center left 6px rgba(240, 248, 255, .5);
background-size:20px;
}
input[type="text"]{
margin-bottom:10px;
margin-top:-50px;
}
input[type="text"]:focus, input[type="password"]:focus {
box-shadow:0px 0px 5px #85F9FF;
}
a.forgot {
color:ffffff;
text-decoration:none;
font-size:50%;
float:right;
position:relative;
left:-20px;
top:-2px;
border:1px solid #949494;
background-color:949494;
padding:1px 5px;
border-bottom-left-radius:5px;
border-bottom-right-radius:5px;
}
a.forgot:hover {
background-color:#F0A400;
border:1px solid #F0A400;
transition:all .2s ease;
-webkit-transition:all .2s ease;
}
input[type="submit"] {
width:100%;
padding:8px;
padding-bottom:14px;
background-color:#5DE800;
border:none;
border-radius:10px;
box-shadow:inset 0px -6px #47B300, 0px 5px 10px rgba(0, 0, 0, .5), 0px -3px 5px rgba(255, 255, 255, 0.5);
text-shadow:1px 1px 1px rgba(255, 255, 255, .5);
font-family:Sans-Serif;
font-size:20px;
transition: all .1s ease;
}
@font-face {
font-family: Cursive;
src: url('http://flycom.webs.com/Impregnable_Personal_Use_Only.ttf');
}
input[type="submit"]:active {
box-shadow:inset 0px -1px #47B300, 0px 1px 3px rgba(0, 0, 0, .5), 0px -3px 5px rgba(255, 255, 255, 0.5);
transition: all .1s ease;
-webkit-transition: all .1s ease;
position:relative;
top:5px;
font-family: Sans-Serif;
}
.lg_name {
font-family: Cursive;
font-size:50px;
background-color:#F0B400;
position:relative;
top:-35px;
left:-23px;
width:119.5%;
border-top-left-radius:5px;
border-top-right-radius:5px;
border-bottom-right-radius:22%;
border-bottom-left-radius:22%;
padding:15px 0px;
box-shadow:0px 10px 10px rgba(0, 0, 0, .1), inset 3px 3px 4px rgba(0, 0, 0, .1), inset 1px -3px 5px rgba(255, 255, 255, .3);
background-image: -webkit-linear-gradient(top, #F0B400 0%, #D6A100 100%);
text-shadow:1px 1px 1px rgba(255, 255, 255, .4);
}
div.else {
font-size:9px;
float:right;
position:relative;
width:100%;
box-shadow:0px 100px 60px rgba(0, 0, 0, 1);
top:4px;
text-align:right;
}
a {
text-decoration:none;
color:#1c1c1c;
}
a:hover {
color:6c6c6c;
}
::selection {
background-color:#FFBAED;
}
</style>

Have Fun