Minimal Form
In Progress
<html>
<html>
<body>
<link href='http://fonts.googleapis.com/css?family=Anonymous+Pro:400,400italic,700,700italic' rel='stylesheet' type='text/css'>
<div>
<form>
<input class="topInput" type="" placeholder="Username" value=""><br/>
<input type="password" placeholder="Password" value=""><br/>
<button type="submit" >Sign In</button>
</form>
</div>
</body>
</html>
body {
body {
background: #4d4d4d;
}
div {
margin: 5em auto 0;
padding: 0em;
background: #f8f8f8;
border: 0;
border-radius: 10px;
height: auto;
width: 280px;
box-shadow: 0px 2px 4px rgba(0,0,0,0.125);
text-align:center;
font-family: 'Anonymous Pro';
}
form {
margin-top:10px;
}
label {
font-size: 1.5em;
line-height: 1.5em;
color: #aaaaaa;
}
input {
margin: 0px 0px 0px;
border: 0;
height: 2em;
width: 100%;
text-align: center;
color: #666666;
font-size: 1.5em;
}
input:focus {
background-color: #f3f3f3;
outline: 0;
}
input.topInput {
border-top-right-radius: 5px;
border-top-left-radius: 5px;
}
button {
height: 2em;
width: 100%;
border: 0px;
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;
box-shadow: 0px 2px 2px rgba(0,0,0,0.5);
background: #66CC66;
color:#f8f8f8;
font-size: 1.5em;
}
button:focus {
background: #5CB75C;
outline: 0;
}
button:hover {
height: 2em;
width: 100%;
border: 0px;
box-shadow: 0px 2px 2px rgba(0,0,0,0.5);
background: #5CB75C;
color:#f8f8f8;
font-size: 1.5em;
}
button:active {
padding: 1px 0 0 0;
height: 2em;
width: 100%;
border: 0px;
box-shadow: 0px 1px 1px rgba(0,0,0,0.125);
background: #27B427;
color:#f8f8f8;
font-size: 1.5em;
}