Ajax Loader
HTML 
 
1
 
2
<!--A Flat Design Login Page by Codelator.com-->
3
<html>
4
<body>
5
 
6
 
7
<form id="loginform" method="" action="">
8
<input type="text" class="input" placeholder="E-mail" />
9
<input type="password" class="input" placeholder="Password" />
10
<input type="submit" class="loginbutton" value="SIGN IN" />
11
</form>
12
<a href="#">Click here for new users</a>
13
 
14
</body>
15
</html>
 
CSS 
@charset "UTF-8";
1
@charset "UTF-8";
2
/*A Flat Design Login Page by Codelator.com*/
3
 
4
body{
5
  background-color:#2c3335;
6
  color:#f5f5f5;
7
  text-align:center;
8
  font-family:"Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, sans-serif;
9
}
10
 
11
a{
12
  color:#fff;
13
  text-decoration:none;
14
}
15
16
#loginform{
17
  margin-top:150px;
18
  margin-left:auto;
19
  margin-right:auto;
20
  width:270px;
21
}
22
23
.input{
24
  width:270px;
25
    padding:15px 25px;
26
    font-family:"Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, sans-serif;
27
  background: #f5f5f5;
28
  border:none;
29
  border-radius: 5px;
30
  color: #333;
31
  font-size: 14px;
32
  margin-top:15px;
33
}
34
 
35
.loginbutton{
36
  background-color:#ffdd00;
37
  border-radius:5px/5px;
38
  -webkit-border-radius:5px/5px;
39
  -moz-border-radius:5px/5px;
40
  color:#333;
41
  display:inline-block;
42
  font-family:"Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, sans-serif;
43
  font-size:18px;
44
  font-weight:bold;
45
  width:270px;
46
  text-align:center;
47
  line-height:50px;
48
  text-decoration:none;
49
  height:50px;
50
  margin-top:20px;
51
  margin-bottom:20px;
52
  border:none;
53
  outline:0;
54
  cursor: pointer;
55
}
56
 
57
.loginbutton:active {
58
  position:relative;
59
  top:1px;
60
}
61
 
62
.loginbutton:hover{
63
  background-color:#e5bf05;
64
}
65
 
 

Flat Design Login Page using HTML and CSS

CSSDeck G+