Introduction:
Here
I will explain how to create best login page design in html
and css
with source code or login page design in html
and css
with source code or simple login form with html
and css.
Description:
In
previous articles I explained Change default selection of color using css, jQuery add border to all images using css, jQuery add more or less link to view text, jQuery add play button for youtube thumbnail images and
many articles relating to html
and css.
Now I will explain how to create best login page design in html
and css
with source code.
|
<html>
<head>
<meta charset="utf-8">
<title>Best Login Page design in html and css</title>
<style type="text/css">
body {
background-color: #f4f4f4;
color: #5a5656;
font-family: 'Open Sans',
Arial, Helvetica,
sans-serif;
font-size: 16px;
line-height: 1.5em;
}
a { text-decoration: none; }
h1 { font-size: 1em; }
h1, p {
margin-bottom: 10px;
}
strong {
font-weight: bold;
}
.uppercase { text-transform:
uppercase; }
/* ---------- LOGIN ---------- */
#login {
margin: 50px auto;
width: 300px;
}
form fieldset input[type="text"], input[type="password"] {
background-color: #e5e5e5;
border: none;
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
color: #5a5656;
font-family: 'Open Sans',
Arial, Helvetica,
sans-serif;
font-size: 14px;
height: 50px;
outline: none;
padding: 0px 10px;
width: 280px;
-webkit-appearance:none;
}
form fieldset input[type="submit"] {
background-color: #008dde;
border: none;
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
color: #f4f4f4;
cursor: pointer;
font-family: 'Open Sans',
Arial, Helvetica,
sans-serif;
height: 50px;
text-transform: uppercase;
width: 300px;
-webkit-appearance:none;
}
form fieldset a {
color: #5a5656;
font-size: 10px;
}
form fieldset a:hover { text-decoration:
underline; }
.btn-round {
background-color: #5a5656;
border-radius: 50%;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
color: #f4f4f4;
display: block;
font-size: 12px;
height: 50px;
line-height: 50px;
margin: 30px 125px;
text-align: center;
text-transform: uppercase;
width: 50px;
}
.facebook-before {
background-color: #0064ab;
border-radius: 3px 0px 0px 3px;
-moz-border-radius: 3px 0px 0px 3px;
-webkit-border-radius: 3px 0px 0px 3px;
color: #f4f4f4;
display: block;
float: left;
height: 50px;
line-height: 50px;
text-align: center;
width: 50px;
}
.facebook {
background-color: #0079ce;
border: none;
border-radius: 0px 3px 3px 0px;
-moz-border-radius: 0px 3px 3px 0px;
-webkit-border-radius: 0px 3px 3px 0px;
color: #f4f4f4;
cursor: pointer;
height: 50px;
text-transform: uppercase;
width: 250px;
}
.twitter-before {
background-color: #189bcb;
border-radius: 3px 0px 0px 3px;
-moz-border-radius: 3px 0px 0px 3px;
-webkit-border-radius: 3px 0px 0px 3px;
color: #f4f4f4;
display: block;
float: left;
height: 50px;
line-height: 50px;
text-align: center;
width: 50px;
}
.twitter {
background-color: #1bb2e9;
border: none;
border-radius: 0px 3px 3px 0px;
-moz-border-radius: 0px 3px 3px 0px;
-webkit-border-radius: 0px 3px 3px 0px;
color: #f4f4f4;
cursor: pointer;
height: 50px;
text-transform: uppercase;
width: 250px;
}
</style>
</head>
<body>
<div id="login">
<h1><strong>Welcome.</strong>
Please login.</h1>
<form action="javascript:void(0);" method="get">
<fieldset>
<p><input type="text" required value="Username"
onBlur="if(this.value=='')this.value='Username'"
onFocus="if(this.value=='Username')this.value=''
"></p>
<p><input type="password" required value="Password"
onBlur="if(this.value=='')this.value='Password'"
onFocus="if(this.value=='Password')this.value=''
"></p>
<p><a href="#">Forgot Password?</a></p>
<p><input type="submit" value="Login"></p>
</fieldset>
</form>
<p><span class="btn-round">or</span></p>
<p>
<a class="facebook-before"></a>
<button class="facebook">Login Using Facbook</button>
</p>
<p>
<a class="twitter-before"></a>
<button class="twitter">Login Using Twitter</button>
</p>
</div> <!-- end login -->
</body>
</html>
|
Demo
 |
|
If you enjoyed this post, please support the blog below. It's FREE! Get the latest Asp.net, C#.net, VB.NET, jQuery, Plugins & Code Snippets for FREE by subscribing to our Facebook, Twitter, RSS feed, or by email. |
|||
Subscribe by RSS
Subscribe by Email
|
|||
52 comments :
Thanks man....keep up the good work!
can you please post .cs code for this form....!!
itz urgent for me
can u explainn this concept on asp.net with css.?
really nice.. useful
thank you it really helps
The outlook is awesome thanks for the code
Thanks buddy...It's worked...
how can i insert code for wrong password. thank you
Please write it in .net
Please write it in .net
Thank you for the code ... it helped me soo much in designing the login page:)
thanx..it really helped
thanks dude it really helped me .....:)
thnx dear it was nice code
its 2 gud....thanx
Thk u ......itz very hhelpful.
than u verry good
Great to have this code
It is very helpful article when design the login form
but its how to work ....
but its how to work ....
please give the registration form page of the above one
Please I need some one to guide me in HTML and in CSS
I have also seen this on the net is it actual working http://jobrize.com/index.php?ref=208872
just UI
gud one thanx bro.
You are the man. I am using it currently. It's awesome!!!
This s helpufull to me.
thank u its working good but How to connect database and create php page pleas reply me as possible
How to use it
Thank you a lot for sharing this design and code.
nice work bro
thank u very much nice work
Great post. I have been searching for this. Creating Login page is better than using any CMS
Thanx dude...keep it up! Its awesome
Great Job..Thanks For Sharing man...
actually my backend code written using with c# bt i m succeded for this ... pls help ....pls send code with using c#
good
Thanks....it's awesome
I learned a lot with this code
Thanks it really wonderful and it helps me a lot
wowwwwwwwwww thanks
thanks
awesome
How do you change what the username and password is?
How can you set it so it goes to a url when submit is pressed
How to generate Login Button click Event ?????????????????????????/
How to login the login form using username and password without login button.
This looks great but being a total novice at coding I don't know how to apply this to my own website:
1. How do I direct the submit button to my home page (assuming correct login details have been put in?
2. Presumably I need some sort of data base to store the usernames and passwords. what format should the data base be is it and excel file?
3. Where do I store the data base on the server? with my html files?
apologies if these are stupid questions but I am a novice at this. I would be grateful of any help.
Regards Kevin
nice code..
thanx that was good for my school work lol thanx again
its good ....
jjtyjtj
How can I add a picture in top of this login page (a small user photo) and making this page as transparent page so I can add background image and also how can I add background image.....
Note: Only a member of this blog may post a comment.