Aspdotnet-Suresh

aspdotnet-suresh offers C#.net articles and tutorials,csharp dot net,asp.net articles and tutorials,VB.NET Articles,Gridview articles,code examples of asp.net 2.0 /3.5,AJAX,SQL Server Articles,examples of .net technologies

Best Login Page Design in HTML, CSS with Source Code

Jun 3, 2014
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.

To create login page design in html using css we need to write the code like as shown below


<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 RSS subscribe by email Subscribe by Email

52 comments :

Unknown said...

Thanks man....keep up the good work!

sravan kumar said...

can you please post .cs code for this form....!!
itz urgent for me

R.Ashok said...

can u explainn this concept on asp.net with css.?

Anonymous said...

really nice.. useful

Unknown said...

thank you it really helps

Anonymous said...

The outlook is awesome thanks for the code

snehapoorvam said...

Thanks buddy...It's worked...

Unknown said...

how can i insert code for wrong password. thank you

Satyam Kashyap said...

Please write it in .net

Satyam Kashyap said...

Please write it in .net

Anonymous said...

Thank you for the code ... it helped me soo much in designing the login page:)

Gokul said...

thanx..it really helped

Unknown said...

thanks dude it really helped me .....:)

Suman Sharma said...

thnx dear it was nice code

Unknown said...

its 2 gud....thanx

Unknown said...

Thk u ......itz very hhelpful.

jadugar jhumri said...

than u verry good

Anonymous said...

Great to have this code

Unknown said...

It is very helpful article when design the login form

Unknown said...

but its how to work ....

Unknown said...

but its how to work ....

Stebin Sunny said...

please give the registration form page of the above one

Lucky Stone GH said...

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

sss said...

just UI

Unknown said...

gud one thanx bro.

Anonymous said...

You are the man. I am using it currently. It's awesome!!!

Unknown said...

This s helpufull to me.

Unknown said...

thank u its working good but How to connect database and create php page pleas reply me as possible

Anonymous said...

How to use it

Kartiki Salunkhe said...

Thank you a lot for sharing this design and code.

Unknown said...

nice work bro

Unknown said...

thank u very much nice work

Nagarjuna said...

Great post. I have been searching for this. Creating Login page is better than using any CMS

Tushar S said...

Thanx dude...keep it up! Its awesome

ESP8266 Basic said...

Great Job..Thanks For Sharing man...

Unknown said...

actually my backend code written using with c# bt i m succeded for this ... pls help ....pls send code with using c#

Pankaj Insan said...

good

Pankaj sharma said...

Thanks....it's awesome
I learned a lot with this code

Unknown said...

Thanks it really wonderful and it helps me a lot

Java said...

wowwwwwwwwww thanks

Anonymous said...

thanks

Unknown said...

awesome

Yankue said...

How do you change what the username and password is?

Yankue said...

How can you set it so it goes to a url when submit is pressed

Unknown said...

How to generate Login Button click Event ?????????????????????????/

Anonymous said...

How to login the login form using username and password without login button.

Anonymous said...

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

Unknown said...

nice code..

Unknown said...

thanx that was good for my school work lol thanx again

Unknown said...

its good ....

Anonymous said...

jjtyjtj

Unknown said...

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.....

Give your Valuable Comments

Note: Only a member of this blog may post a comment.

© 2015 Aspdotnet-Suresh.com. All Rights Reserved.
The content is copyrighted to Suresh Dasari and may not be reproduced on other websites without permission from the owner.