Best Rounded Corners CSS3 Static Login Form

Login Form

The Design of the login forms are constantly in demand , so we have shared the code by which you can make a static elegant login form , made by using technologies like HTML-5 & CSS-3.

<! doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
</head>
<style type="text/css">

#Form_Layer{
margin-top:30%;
margin-left:40%;
}
#user_name{
width:300px;
height:40px;
font-size: 20px;
border-radius:2px;
margin-bottom:20px;
box-shadow:inset 0 1px 5px #fff, 0 0 8px 1px #000;
}
#user_name:focus{
border:2px solid #00FAE1;
}
#passwd{
width:300px;
height:40px;
font-size: 20px;
border-radius:2px;
background:#fff;
margin-bottom:20px;
box-shadow:inset 0 1px 5px #fff, 0 0 8px 1px #000;
}
#passwd:focus{
border:2px solid #00FAE1;
}
#go{
font-size: 20px;
margin-bottom:20px;
font:ubuntu;
background-color: #D13F00;
border: 1px solid #D13F00;
width:150px;
height:40px;
border-radius:8px;
color:#fff;
}


</style>
<body>
<form action="#" id="Form_Layer">
<input type="text" placeholder="Enter Username " id="user_name"><br/>
<input type="password" placeholder="Password" id="passwd"><br/>
<input type="submit" src="bg.png" value="Submit" id="go">
</form>

</body>
</html>

Use This Code & Modify the Backgrounds with attractive ones . Apply this code on your dynamic PHP , JSP , ASP.NET project & Get Attractive Login Form .

(Visited 2 times, 1 visits today)