Ajax Loader
HTML 
<html>
1
<html>
2
  <head>
3
  
4
  </head>
5
  <body>
6
    <div class="wrapper">
7
      <div id="box">
8
        <img src="http://www.pixentral.com/pics/1A2fMA1TzhR2QtSPBE7jHWv9k.png" alt="lock" />
9
        <h3>Please sign in</h3>
10
        <form>
11
          <input type="text" placeholder="USERNAME" />
12
          <input type="text" placeholder="PASSWORD" />
13
        </form>
14
         <a href="#">forgot ?</a>
15
         <input onclick="this.style.backgroundColor = '#69c061';" type="submit" value="go on... click me!"/>
16
      
17
        <div class="signup">
18
          <p>not a member ? <a href="#">sign up</a></p>
19
        </div>
20
      </div>
21
    </div>
22
  </body>
23
</html>
 
CSS 
@import url(http://fonts.googleapis.com/css?family=Montserrat:400,700)
1
@import url(http://fonts.googleapis.com/css?family=Montserrat:400,700)
2
 
3
$gray: #666
4
$light-gray: #ccc
5
6
body
7
  outline: none
8
  width: 100%
9
  height: 100%
10
  margin: 50px auto
11
  background: #f9f9f9
12
  box-sizing: border-box
13
  font-family: 'Montserrat', sans-serif
14
15
#wrapper
16
  width: 100%
17
  height: 100%
18
  margin: 0 auto
19
20
#box
21
  width: 320px
22
  height: auto
23
  margin: 0 auto
24
  background: #fff
25
  border: thin solid #ededed
26
 
27
#box > img
28
  width: 16px
29
  height: auto
30
  display: block
31
  margin: 0 auto
32
  padding: 30px 0 20px 0
33
 
34
#box > h3
35
  text-transform: uppercase
36
  text-align: center
37
  font-size: .9em
38
  color: $gray
39
  margin: 0 0 35px 0
40
41
#box > form
42
  width: 100%
43
  height: auo
44
  margin: 0 auto
45
  text-align: center
46
 
47
#box > form > input
48
  display: inline-block
49
  width: 260px
50
  height: 50px
51
  margin: 5px auto
52
  padding: 15px
53
  box-sizing: border-box
54
  font-size: .8em
55
  border: 1.5px solid #cccccc
56
  transition: all .2s ease
57
 
58
#box > form > input:focus
59
  border: thin solid #015b7e
60
  outline: none
61
 
62
::-webkit-input-placeholder
63
  color: $light-gray
64
  font-weight: 700
65
  font-size: .9em
66
 
67
 
68
#box > a
69
  display: block
70
  margin: 0
71
  padding: 5px 0 15px 0
72
  width: 260px
73
  height: 20px
74
  margin: 0 auto
75
  text-align: right
76
  text-transform: uppercase
77
  font-size: .7em
78
  color: $light-gray
79
  font-weight: 400
80
81
#box > input
82
  width: 260px
83
  height: 50px
84
  background: #015b7e
85
  border: none
86
  outline: none
87
  margin: 0 auto
88
  display: block
89
  color: #fff
90
  text-transform: uppercase
91
  text-align: center
92
  margin-bottom: 20px
93
  border-radius: 3px
94
  cursor: pointer
95
  font-weight: 700
96
  font-size: .7em
97
  transition: all .2s ease
98
  
99
#box > input:hover
100
  background: #014965
101
 
102
#box > .signup
103
  width: 100%
104
  height: auto
105
  border: none
106
  background: #f5f5f5
107
  outline: none
108
  margin: 0 auto
109
  padding: 20px
110
  display: block
111
  color: $gray
112
  text-transform: uppercase
113
  text-align: center
114
  box-sizing: border-box
115
  font-size: .8em
116
  
117
#box > .signup p,a
118
  font-size: .8em
119
  text-decoration: none
120
121
#box > .signup p
122
  color: $light-gray
123
124
#box > .signup a
125
  text-decoration: none
126
  color: #015b7e
127
  font-size: 1em
128
  padding-left: 25px
 

Flat Login

CSSDeck G+