Ajax Loader
HTML 
<!DOCTYPE html>
1
<!DOCTYPE html>
2
<!--[if lt IE 7]> <html class="lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
3
<!--[if IE 7]> <html class="lt-ie9 lt-ie8" lang="en"> <![endif]-->
4
<!--[if IE 8]> <html class="lt-ie9" lang="en"> <![endif]-->
5
<!--[if gt IE 8]><!--> <html lang="en"> <!--<![endif]-->
6
<head>
7
  <meta charset="utf-8">
8
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
9
  <title>Facebook Login Form</title>
10
  <link rel="stylesheet" href="css/style.css">
11
  <!--[if lt IE 9]><script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
12
</head>
13
<body>
14
  <form class="login" onsubmit="return false">
15
    <h1>Facebook</h1>
16
    <input type="email" name="email" class="login-input" placeholder="Email Address" autofocus>
17
    <input type="password" name="password" class="login-input" placeholder="Password">
18
    <input type="submit" value="Login" class="login-submit">
19
    <p class="login-help"><a href="#">Forgot password?</a></p>
20
  </form>
21
</body>
22
</html>
23
 
 
CSS 
/*
1
/*
2
 * Copyright (c) 2013 Thibaut Courouble
3
 * http://www.cssflow.com
4
 *
5
 * Licensed under the MIT License:
6
 * http://www.opensource.org/licenses/mit-license.php
7
 *
8
 * View the Sass/SCSS source at:
9
 * http://www.cssflow.com/snippets/facebook-login-form/demo/scss
10
 *
11
 * Original PSD by Alex Montague: http://goo.gl/lMwBA
12
 */
13
 
14
@import url(http://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.css);
15
 
16
body {
17
  font: 12px/20px 'Lucida Grande', Verdana, sans-serif;
18
  color: #404040;
19
  background: #ebc9a2;
20
}
21
 
22
input, textarea, select, label {
23
  font-family: inherit;
24
  font-size: 12px;
25
  -webkit-box-sizing: border-box;
26
  -moz-box-sizing: border-box;
27
  box-sizing: border-box;
28
}
29
 
30
.login {
31
  margin: 20px auto;
32
  padding: 18px 20px;
33
  width: 200px;
34
  background: #3f65b7;
35
  background-clip: padding-box;
36
  border: 1px solid #172b4e;
37
  border-bottom-color: #142647;
38
  border-radius: 5px;
39
  background-image: -webkit-radial-gradient(cover, #437dd6, #3960a6);
40
  background-image: -moz-radial-gradient(cover, #437dd6, #3960a6);
41
  background-image: -o-radial-gradient(cover, #437dd6, #3960a6);
42
  background-image: radial-gradient(cover, #437dd6, #3960a6);
43
  -webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.3), inset 0 0 1px 1px rgba(255, 255, 255, 0.1), 0 2px 10px rgba(0, 0, 0, 0.5);
44
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.3), inset 0 0 1px 1px rgba(255, 255, 255, 0.1), 0 2px 10px rgba(0, 0, 0, 0.5);
45
}
46
 
47
.login > h1 {
48
  margin-bottom: 20px;
49
  font-size: 16px;
50
  font-weight: bold;
51
  color: white;
52
  text-align: center;
53
  text-shadow: 0 -1px rgba(0, 0, 0, 0.4);
54
}
55
 
56
.login-input {
57
  display: block;
58
  width: 100%;
59
  height: 37px;
60
  margin-bottom: 20px;
61
  padding: 0 9px;
62
  color: white;
63
  text-shadow: 0 1px black;
64
  background: #2b3e5d;
65
  border: 1px solid #15243b;
66
  border-top-color: #0d1827;
67
  border-radius: 4px;
68
  background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.2) 20%, rgba(0, 0, 0, 0));
69
  background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.2) 20%, rgba(0, 0, 0, 0));
70
  background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.2) 20%, rgba(0, 0, 0, 0));
71
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.2) 20%, rgba(0, 0, 0, 0));
72
  -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.2);
73
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.2);
74
}
75
 
76
.login-input:focus {
77
  outline: 0;
78
  background-color: #32486d;
79
  -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3), 0 0 4px 1px rgba(255, 255, 255, 0.6);
80
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3), 0 0 4px 1px rgba(255, 255, 255, 0.6);
81
}
82
 
83
.lt-ie9 .login-input { line-height: 35px; }
84
 
85
.login-submit {
86
  display: block;
87
  width: 100%;
88
  height: 37px;
89
  margin-bottom: 15px;
90
  font-size: 14px;
91
  font-weight: bold;
92
  color: #294779;
93
  text-align: center;
94
  text-shadow: 0 1px rgba(255, 255, 255, 0.3);
95
  background: #adcbfa;
96
  background-clip: padding-box;
97
  border: 1px solid #284473;
98
  border-bottom-color: #223b66;
99
  border-radius: 4px;
100
  cursor: pointer;
101
  background-image: -webkit-linear-gradient(top, #d0e1fe, #96b8ed);
102
  background-image: -moz-linear-gradient(top, #d0e1fe, #96b8ed);
103
  background-image: -o-linear-gradient(top, #d0e1fe, #96b8ed);
104
  background-image: linear-gradient(to bottom, #d0e1fe, #96b8ed);
105
  -webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), inset 0 0 7px rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.15);
106
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), inset 0 0 7px rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.15);
107
}
108
 
109
.login-submit:active {
110
  background: #a4c2f3;
111
  -webkit-box-shadow: inset 0 1px 5px rgba(0, 0, 0, 0.4), 0 1px rgba(255, 255, 255, 0.1);
112
  box-shadow: inset 0 1px 5px rgba(0, 0, 0, 0.4), 0 1px rgba(255, 255, 255, 0.1);
113
}
114
 
115
.login-help {
116
  text-align: center;
117
}
118
 
119
.login-help > a {
120
  font-size: 11px;
121
  color: #d4deef;
122
  text-decoration: none;
123
  text-shadow: 0 -1px rgba(0, 0, 0, 0.4);
124
}
125
 
126
.login-help > a:hover {
127
  text-decoration: underline;
128
}
129
 
130
::-moz-focus-inner {
131
  padding: 0;
132
  border: 0;
133
}
134
 
135
:-moz-placeholder { color: #bcc0c8 !important; }
136
::-webkit-input-placeholder { color: #bcc0c8; }
137
:-ms-input-placeholder { color: #bcc0c8 !important; }
138
 
 

Facebook Login Form

CSSDeck G+