Ajax Loader
×

Login

Inspired by http://dribbble.com/shots/1007172-Login-3-Different-Styles-PSD

HTML 
<!doctype html>
1
<!doctype html>
2
<html lang="en-US">
3
<head>
4
 
5
  <meta charset="utf-8">
6
 
7
  <title>Login_03</title>
8
 
9
  <!--[if lt IE 9]>
10
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
11
  <![endif]-->
12
 
13
</head>
14
 
15
<body>
16
 
17
  <div id="login">
18
 
19
    <form action="javascript:void(0);" method="post">
20
 
21
      <span class="fontawesome-user"></span>
22
      <input type="text" required value="Username" onBlur="if(this.value=='')this.value='Username'" onFocus="if(this.value=='Username')this.value='' "> <!-- JS because of IE support; better: placeholder="Username" -->
23
      <span class="fontawesome-lock"></span>
24
      <input type="password" required value="Password" onBlur="if(this.value=='')this.value='Password'" onFocus="if(this.value=='Password')this.value='' "> <!-- JS because of IE support; better: placeholder="Password" -->
25
      <input type="submit" value="Login">
26
 
27
    </form>
28
 
29
  </div> <!-- end login -->
30
 
31
</body>
32
</html>
 
CSS 
@charset "utf-8";
1
@charset "utf-8";
2
/* CSS Document */
3
 
4
/* ---------- FONTAWESOME ---------- */
5
/* ---------- http://fortawesome.github.com/Font-Awesome/ ---------- */
6
/* ---------- http://weloveiconfonts.com/ ---------- */
7
 
8
@import url(http://weloveiconfonts.com/api/?family=fontawesome);
9
 
10
/* ---------- ERIC MEYER'S RESET CSS ---------- */
11
/* ---------- http://meyerweb.com/eric/tools/css/reset/ ---------- */
12
 
13
@import url(http://meyerweb.com/eric/tools/css/reset/reset.css);
14
 
15
/* ---------- FONTAWESOME ---------- */
16
 
17
[class*="fontawesome-"]:before {
18
  font-family: 'FontAwesome', sans-serif;
19
}
20
 
21
/* ---------- GENERAL ---------- */
22
 
23
body {
24
  background-color: #393937;
25
  font-family: Arial, sans-serif;
26
  font-size: 14px;
27
  line-height: 1.5em;
28
}
29
 
30
input {
31
  font-size: 1em;
32
  line-height: 1.5em;
33
  margin: 0;
34
  padding: 0;
35
  -webkit-appearance: none;
36
}
37
 
38
/* ---------- LOGIN ---------- */
39
 
40
#login {
41
  margin: 50px auto;
42
  width: 242px;
43
}
44
 
45
#login span {
46
  color: #676767;
47
  display: block;
48
  height: 48px;
49
  line-height: 48px;
50
  position: absolute;
51
  text-align: center;
52
  width: 36px;
53
}
54
 
55
#login input {
56
  border: none;
57
  height: 48px;
58
  outline: none;
59
}
60
 
61
#login input[type="text"] {
62
  background-color: #dedede;
63
  border-top: 1px solid #000;
64
  border-right: 1px solid #000;
65
  border-left: 1px solid #000;
66
  border-radius: 5px 5px 0 0;
67
  -moz-border-radius: 5px 5px 0 0;
68
  -webkit-border-radius: 5px 5px 0 0;
69
  color: #363636;
70
  padding-left: 36px;
71
  width: 204px;
72
}
73
 
74
#login input[type="password"] {
75
  background-color: #dedede;
76
  border-top: 1px solid #828282;
77
  border-right: 1px solid #000;
78
  border-bottom: 1px solid #000;
79
  border-left: 1px solid #000;
80
  border-radius: 0 0 5px 5px;
81
  -moz-border-radius: 0 0 5px 5px;
82
  -webkit-border-radius: 0 0 5px 5px;
83
  color: #363636;
84
  margin-bottom: 20px;
85
  padding-left: 36px;
86
  width: 204px;
87
}
88
 
89
#login input[type="submit"] {
90
  background-color: #e14d4d;
91
  border: 1px solid #391515;
92
  border-radius: 5px;
93
  -moz-border-radius: 5px;
94
  -webkit-border-radius: 5px;
95
  color: #fff;
96
  font-weight: bold;
97
  line-height: 48px;
98
  text-align: center;
99
  text-transform: uppercase;
100
  width: 240px;
101
}
102
 
103
#login input[type="submit"]:hover {
104
  background-color: #f15958;
105
}
 

Login

CSSDeck G+