Suport the Website

Powered By EXEIdeas

CSS Login Form Tutorial

Hello everyone. In today’s lesson, I will guide you step by step through the creation of this nicely-styled CSS/HTML Login Form :



Create a new .html document. Name it login.html.
Copy the code and insert it into your new created document:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Login Form</title>
<link href="styles.css" rel="stylesheet" type="text/css">
</head>
<body>
<form action="login.php">
<div class="paragraph">
<p>Insert your credentials</p>
</div>
<input type="text" name="username" size="15"/> 
<label for text>Username</label> <br/>
<input type="text" name="password" size="15"/>
<label for password>Password</label><br/>
<input type="submit" class="submit" value="Login" />
</form>
</body>
</html>

This is how your page looks like now:

Pretty comun,huh?

Let’s add a bit of style. Create a new file in the same folder and name it styles.css
Align the form:

body
{
margin:50px 0px; 
padding:0px;
text-align:center;
}

Now stylize the form
form 
{
width:250px;
height:200px;
margin:0px auto;
text-align:left;
padding:15px;
border-radius:25px;
border: 0px;
background: #C9C9C9;
    background: -webkit-linear-gradient(top, #eee 0%,#C9C9C9 100%);
    background: -moz-linear-gradient(top, #eee 0%,#C9C9C9 100%);
    background: -o-linear-gradient(top, #eee 0%,#C9C9C9 100%);
    background: -ms-linear-gradient(top, #eee 0%,#C9C9C9 100%);
    background: linear-gradient(top, #eee 0%,#C9C9C9 100%);
}

Stylize the rest of the form elements:

input
{
height:25px;
border:#005481;
margin:10px;
margin-top:13px;
}
label
{
font-family: Helvetica, Arial, sans-serif;
    font-weight: bold;
    font-size: 14px; 
color:#005481;
}
.submit
{
background-color:#005481;
font-family: Helvetica, Arial, sans-serif;
    font-weight: bold;
    font-size: 14px; 
color:#FFF;
width:120px;
height:30px;
border-radius:5px;
}

Add style to the first paragraph:

.paragraph
{
padding-left:10px;
padding-bottom:3px;
border-bottom:1px #005481 dotted;
margin:0px;
}
p
{
font-family: Helvetica, Arial, sans-serif;
    font-weight: bold;
    font-size: 14px; 
color:#005481;
}


Great. Your form is done. If you have any questions, don’t hesitate to ask.




Post a Comment