How To Create A Login Form – CSS3
In this tutorial i will teach you How To Create A Login Form – CSS3.Here we are using HTML and CSS3 to accomplish this.
HTML:
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>How To Create Login Form - CSS3< How To Create Login Form In CSS3</title> <link href="Style.css" rel="stylesheet" /> </head> <body> <div> <h1 class="h1">How To Create Login Form - CSS3</h1> <div class="main"> <div class="login"> <form> <p><input type="text" name="login" placeholder="Username" /></p> <p><input type="password" name="password" placeholder="Password" /></p> <p class="forgot"> <label> <a href="#">Forgot Password ?</a> </label> </p> <p class="submit"><input type="submit" value="Login" /></p> </form> </div> <div class="footer"> <p>© 2013 All rights reserved by HighTechnology.in <a href="http://hightechnology.in" target="_blank">HighTechnology.in</a> | Hosting Partner <a href="http://www.grootstech.com" target="_blank">Grootstech Solutions</a> </p> </div> </div> </div> </body> </html>
CSS3:
body { margin:0px auto; padding-top:40px; width:980px; font-family:Candara; color: #fff; background: #404040; } .h1 { text-align:center; } .main { margin: 50px auto; width: 940px; } .login { position: relative; margin: 0 auto; padding: 20px 20px 20px; width: 310px; } .login p.submit { text-align: right; } ::-moz-placeholder { color: #000 !important; font-size: 13px; } ::-webkit-input-placeholder { color: #000; font-size: 13px; } .login:before { content: ''; position: absolute; top: -8px; right: -8px; bottom: -8px; left: -8px; z-index: -1; background: rgba(0, 0, 0, 0.08); border-radius: 4px; } .login p { margin: 20px 0 0; } .login p:first-child { margin-top: 0; } .login input[type=text], .login input[type=password] { width: 278px; } .login p.forgot { float: left; line-height: 31px; font-size:12px; padding-left:5px; } .login p.forgot a { color:#fff; text-decoration:none } input { font-family:Candara; font-size: 14px; } input[type=text], input[type=password] { margin: 5px; padding: 0 10px; width: 200px; height: 34px; color: #404040; background: white; border: 1px solid; border-color: #d4d4d4; } input[type=text]:focus, input[type=password]:focus { border-color: #ff6a00; } input[type=submit] { padding: 0 18px; height: 29px; font-size: 14px; font-weight: bold; color: #fff; background: #404040; border: 2px solid #000; border-radius: 4px; outline: 0; } .footer { padding-top:40px; text-align:center; font-size:14px; color:#fff; } .footer a { color:#fff; }
2 replies on “How To Create A Login Form – CSS3”
Thanks for your sharing,I appreciate this.keep up the good work.
Thanks for your sharing,I appreciate this.keep up the good work.