How To Create Simple Login / Sign Up Form Using CSS And HTML

Share:

How To Create Simple Login / Sign Up Form Using CSS And HTML. In two previous tutorials, we have discussed how to create a login / sign up with a php script but this tutorial will not complete if we do not discuss how to create a simple login / sign-up form using CSS and HTML code. Using this simple login / sign-up form, you can use a form for php login script in the previous tutorials or you use for other purposes in your website. Okay, let’s discuss how to create login / sign up the form.
How To Create Simple Login / Sign Up Form Using CSS And HTML

How To Create Simple Login / Sign Up Form Using CSS And HTML

To create a login / sign-up form, please follow the steps in this tutorial below :

Download Now How To Create Simple Login / Sign Up Form Using CSS And HTML

HTML Code For Create A Login / Sign Up Form
To display the login / sign-up form in the browser, we have to use html code. In addition to displaying the username and password boxes to be filled, here we will show the login / sign up of social media like facebook and twitter as an option for the user to login. Here are some snippets of HTML code to create login / sign-up form :

<form class="sign-up">
    <h1 class="sign-up-title"></h1>
	<div class="social-login">
	<div class="twitter"><a href="#" class="btn_1">Login with Twitter</a></div>
	<div class="fb"><a href="#" class="btn_2">Login with Facebook</a></div>
	</div>
    <input type="text" class="sign-up-input" placeholder="Your Username?" autofocus>
    <input id="password" type="password" class="sign-up-input" placeholder="Your Password?">
    <input type="submit" value="Sign Up Now!" class="sign-up-button">
	<p class="sign-up-footer"><strong><a href="#">Lost your password?</a>  or  <a href="#">Register</a></strong></p>  	
</form>

Create CSS Code
Next is to beautify the login / sign-up form that we have created with some effects like shadow effect css for boxes and buttons form, background image until opacity effect. Here is the css code :
Simple-Login-Sign-Up-Form.css

/*
 * How To Create Simple Login / Sign Up Form Using CSS And HTML
 */
body {
  font: 13px/20px 'Helvetica Neue', Helvetica, Arial, sans-serif;
  color: #404040;
  background: #596778;
}

.sign-up {
  position: relative;
  margin: 50px auto;
  width: 320px;
  padding: 33px 25px 1px;
  background: white;
  border-bottom: 1px solid #c4c4c4;
  border-radius: 5px;
  -webkit-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25);
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25);
}
.sign-up:before, .sign-up:after {
  content: '';
  position: absolute;
  bottom: 1px;
  left: 0;
  right: 0;
  height: 10px;
  background: inherit;
  border-bottom: 1px solid #d2d2d2;
  border-radius: 4px;
}
.sign-up:after {
  bottom: 3px;
  border-color: #dcdcdc;
}

.sign-up-title {
  margin: -25px -25px 25px;
  padding: 15px 25px;
  line-height: 35px;
  font-size: 26px;
  font-weight: 300;
  color: #aaa;
  text-align: center;
  text-shadow: 0 1px rgba(255, 255, 255, 0.75);
  background: #f7f7f7;
}
.sign-up-title:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 8px;
  background: #c4e17f url('http://3.bp.blogspot.com/-i5fPHvNN6P4/UrVU2GBJx-I/AAAAAAAABQs/9H6Q69_nn4M/s1600/How+To+Create+Simple+Login+Sign+Up+Form+Using+CSS+Tutorial+World+Edu+1.gif') no-repeat;
  background-size:400px 7px;
  border-radius: 5px 5px 0 0;
  
 }
 
.sign-up-footer{
  line-height: 35px;
  font-size: 16px;
  font-weight: 300;
  text-decoration:none;
  color: #aaa;
  text-align: center;
  text-shadow: 0 1px rgba(255, 255, 255, 0.75);
}
a {
  text-decoration:none;
  color:#aaa;
}
input {
  font-family: inherit;
  color: inherit;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.sign-up-input {
  width: 100%;
  height: 50px;
  margin-bottom: 25px;
  padding: 0 33px 2px;
  font-size: 17px;
  background: #eae7e7 url(http://3.bp.blogspot.com/-O06EJqU7fA8/UrVVZnuoowI/AAAAAAAABQ0/j-XnP72-0E4/s1600/How+To+Create+Simple+Login+Sign+Up+Form+Using+CSS+HTML+Tutorial+World+Edu+2.png) no-repeat;
  background-size:32px 200px;
  background-position:3px 8px;
  border: 2px solid #ebebeb;
  border-radius: 4px;
  -webkit-box-shadow: inset 0 -2px #ebebeb;
  box-shadow: inset 0 -2px #ebebeb;
}
#password
{
    background-position: 5px -70px !important;
}
.sign-up-input:focus {
  border-color: #62c2e4;
  outline: none;
  -webkit-box-shadow: inset 0 -2px #62c2e4;
  box-shadow: inset 0 -2px #62c2e4;
}
.lt-ie9 .sign-up-input {
  line-height: 48px;
}

.sign-up-button {
  position: relative;
  vertical-align: top;
  width: 100%;
  height: 54px;
  padding: 0;
  font-size: 22px;
  color: white;
  text-align: center;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
  background: #b30000;
  border: 0;
  border-bottom: 2px solid #800000;
  border-radius: 5px;
  cursor: pointer;
  -webkit-box-shadow: inset 0 -2px #800000;
  box-shadow: inset 0 -2px #800000;
}
.sign-up-button:active {
  top: 1px;
  outline: none;
  -webkit-box-shadow: none;
  box-shadow: none;
}

:-moz-placeholder {
  color: #ccc;
  font-weight: 300;
}

::-moz-placeholder {
  color: #ccc;
  opacity: 1;
  font-weight: 300;
}

::-webkit-input-placeholder {
  color: #ccc;
  font-weight: 300;
}

:-ms-input-placeholder {
  color: #ccc;
  font-weight: 300;
}

::-moz-focus-inner {
  border: 0;
  padding: 0;
}
.social-login{
  padding:0px 0 0 0;
  height:65px;
}
.twitter{
  background:url(http://1.bp.blogspot.com/-HGZag0AEev4/UrVVn5aeXlI/AAAAAAAABQ8/06PgCCysvj4/s1600/How+To+Create+Simple+Login+Sign+Up+Form+Using+CSS+HTML+Tutorial+World+Edu+3.png) no-repeat;
  height:32px; 
  width:157px;
  display:block;
  float:left;
  margin-top:10px
}
.twitter:hover{
  background:url(http://1.bp.blogspot.com/-HGZag0AEev4/UrVVn5aeXlI/AAAAAAAABQ8/06PgCCysvj4/s1600/How+To+Create+Simple+Login+Sign+Up+Form+Using+CSS+HTML+Tutorial+World+Edu+3.png) no-repeat;
  background-position:0 -32px
}
.twitter:active{
  margin-top:11px
}
.btn_1{
  padding:8px 0 0 35px;
  text-shadow:-1px -1px 0 #0083b3;
  color:#fff;
  font-weight:700;
  font-size:12px;
  height:32px;
  display:block
}
.fb{
  background:url(http://4.bp.blogspot.com/-7CjDKFdvAVk/UrVVu8wlujI/AAAAAAAABRE/kJP-8QnKsp4/s1600/How+To+Create+Simple+Login+Sign+Up+Form+Using+CSS+HTML+Tutorial+World+Edu+4.png) no-repeat;
  height:32px;
  width:157px;
  display:block;
  float:right;
  margin-top:10px
}
.fb:hover{
  background:url(http://4.bp.blogspot.com/-7CjDKFdvAVk/UrVVu8wlujI/AAAAAAAABRE/kJP-8QnKsp4/s1600/How+To+Create+Simple+Login+Sign+Up+Form+Using+CSS+HTML+Tutorial+World+Edu+4.png) no-repeat;
  background-position:0 -32px
}
.fb:active{
  margin-top:11px
}
.btn_2{
  padding:8px 0 0 31px;
  text-shadow:-1px -1px 0 #366c96;
  color:#fff;
  font-weight:700;
  font-size:12px;
  height:32px;
 display:block
}

Save the css code above with file name is Simple-Login-Sign-Up-Form.css then create an external link in an HTML page from the login / sign-up form like the example below :

<link rel="stylesheet" href="Simple-Login-Sign-Up-Form.css">

Put the external links of the css page just above the </ head>. So the complete HTML page to create a login / sign-up form is as follows. Please copy in notepad or other web editor.
Simple-Login-Sign-Up-Form.html

<!DOCTYPE html>
<!--[if lt IE 7]> <html class="lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if IE 7]> <html class="lt-ie9 lt-ie8" lang="en"> <![endif]-->
<!--[if IE 8]> <html class="lt-ie9" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html lang="en"> <!--<![endif]-->
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <title> How To Create Simple Login / Sign Up Form Using CSS And HTML </title>
  <link rel="stylesheet" href="Simple-Login-Sign-Up-Form.css">
  <!--[if lt IE 9]><script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->

</head>
<body>
  <form class="sign-up">
    <h1 class="sign-up-title"><a href="http://tutorial.world.edu/website-design/how-to-create-simple-login-sign-up-form-css-html/">CSS & HTML Login Form</a></h1>
	<div class="social-login">
	<div class="twitter"><a href="#" class="btn_1">Login with Twitter</a></div>
	<div class="fb"><a href="#" class="btn_2">Login with Facebook</a></div>
	</div>
    <input type="text" class="sign-up-input" placeholder="Your Username?" autofocus>
    <input id="password" type="password" class="sign-up-input" placeholder="Your Password?">
    <input type="submit" value="Sign Up Now!" class="sign-up-button">
	<p class="sign-up-footer"><strong><a href="#">Lost your password?</a>  or  <a href="#">Register</a></strong></p>  	
  </form>
  <p style="margin-top:-35px;text-align:center;color:#fff;font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;">By <a style="text-decoration:none;color:#fff;" href="http://tutorial.world.edu">Tutorial.World.Edu</a></p>
</body>
</html>

If you look through the web browser, the result will be as shown below :
 How To Create Simple Login / Sign Up Form Using CSS And HTMLTo create a login / sign-up form is not difficult and even very simple and easy. Please apply, good luck …
Thanks for reading How To Create Simple Login / Sign Up Form Using CSS And HTML

[Tutorial.World.Edu]

6 thoughts on “How To Create Simple Login / Sign Up Form Using CSS And HTML

Leave a Reply

Your email address will not be published. Required fields are marked *