Free Photos
WordPress Themes

Create Flat Design Login Form

HTML
<!-- Login Container --> <section class="login"> <form action="" method="post"> <!-- The Username Field --> <label for="username">Username <input type="text" name="username" id="username" /> </label> <!-- The Password Field --> <label for="password">Password <input type="password" name="password" id="password" /> </label> <!-- The Remember Me Checkbox --> <input type="checkbox" name="remember" id="remember" /> <label class="check" for="remember"><span></span>Remember Me</label> <!-- Clearn both sides --> <div class="clear"></div> <!-- Recover Button --> <input type="button" value="Recover" /> <!-- The Login Button --> <input type="submit" value="Login" /> </form> </section>
CSS
/* * IMporting the font */ @import url(https://fonts.googleapis.com/css?family=Roboto+Slab|Roboto); /* * General styling */ body { padding:0; margin:0; background-color:#ecf0f1; } .clear { clear:both; width:100%; } h1{ margin:40px auto; padding:0; font-family: 'Roboto Slab', serif; font-size:100px; font-weight:1000; color:#2980b9; text-align:center; } /* * Styling the container for the login form. */ .login { width:350px; padding:25px; margin:50px auto; background-color:#2c3e50; } /* * Styling the Lables and checkbox font */ label { font-size:24px; font-family: 'Roboto Slab', serif; color:#fff; } .check { font-size:15px; font-family: 'Roboto Slab', serif;} /* * General Input Style */ input[type="text"], input[type="password"], input[type="submit"], input[type="button"] { width: calc(100% - 33px); margin:10px 0 10px 0; padding:15px; border: solid 1px #ccc; font-size:20px; background-color:#ecf0f1; } /* * Styling the Buttons */ input[type="submit"], input[type="button"] { position:relative; width:calc(50% - 13px); background-color:#3498db; border:none; color:#FFF; -webkit-transition: all 0.1s; -moz-transition: all 0.1s; transition: all 0.1s; -webkit-box-shadow: 0px 9px 0px #2980b9; -moz-box-shadow: 0px 9px 0px #2980b9; box-shadow: 0px 9px 0px #2980b9; } input[type="submit"]:active, input[type="button"]:active{ -webkit-transition: all 0.1s; -moz-transition: all 0.1s; transition: all 0.1s; position:relative; top:7px; -webkit-box-shadow: 0px 2px 0px #16a085; -moz-box-shadow: 0px 2px 0px #16a085; box-shadow: 0px 2px 0px #16a085; } input[type="submit"] { float:right; } /* * Styling the checkbox */ input[type="checkbox"] { -webkit-appearance: none; background-color: #fafafa; border: 1px solid #cacece; box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px -15px 10px -12px rgba(0,0,0,0.05); padding: 9px; border-radius: 3px; position: relative; } input[type="checkbox"]:active, .input[type="checkbox"]:checked:active { box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px 1px 3px rgba(0,0,0,0.1); } input[type="checkbox"]:checked { background-color: #e9ecee; border: 1px solid #adb8c0; box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px -15px 10px -12px rgba(0,0,0,0.05), inset 15px 10px -12px rgba(255,255,255,0.1); color: #99a1a7; } input[type="checkbox"]:checked:after { content: '\2714'; font-size: 14px; position: absolute; top: 0px; left: 3px; color: #99a1a7; }
JAVASCRIPT
Expand for more options Login