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 .


Related

Webbies 5543133604716488634

Post a Comment

  1. Hi X, How are you?
    This is another great article with very useful tips about. I am hoping to pick up more blogging work, too! I like to review my Looking for Computers ny? Notebooks laptop computer or laptop computer or computer is a cellular NY laptop computer or computer that is small as much as necessary to be provided furthermore set aside on the level while doing. Find the best NY laptop computer or pcs these days.
    Thank You Very Much For a Nice & Cool Article.

    ReplyDelete

emo-but-icon

SEARCH

Follow Us On

item