Ajax Loader
HTML 
 
1
 
2
  <form>
3
  <h1>Material Design Text Input With No Extra Markup</h1>
4
  <input placeholder="Username" type="text" required="">
5
  <input placeholder="Password" type="password" required="">
6
  <button>Submit</button>
7
</form>
8
 
9
<link href='http://fonts.googleapis.com/css?family=Roboto:400' rel='stylesheet' type='text/css'>
 
CSS 
h1, input::-webkit-input-placeholder, button {
1
h1, input::-webkit-input-placeholder, button {
2
  font-family: 'roboto', sans-serif;
3
  -webkit-transition: all 0.3s ease-in-out;
4
          transition: all 0.3s ease-in-out;
5
}
6
 
7
h1 {
8
  height: 100px;
9
  width: 100%;
10
  font-size: 18px;
11
  background: #18aa8d;
12
  color: white;
13
  line-height: 150%;
14
  border-radius: 3px 3px 0 0;
15
  box-shadow: 0 2px 5px 1px rgba(0, 0, 0, 0.2);
16
}
17
 
18
form {
19
  box-sizing: border-box;
20
  width: 260px;
21
  margin: 100px auto 0;
22
  box-shadow: 2px 2px 5px 1px rgba(0, 0, 0, 0.2);
23
  padding-bottom: 40px;
24
  border-radius: 3px;
25
}
26
form h1 {
27
  box-sizing: border-box;
28
  padding: 20px;
29
}
30
 
31
input {
32
  margin: 40px 25px;
33
  width: 200px;
34
  display: block;
35
  border: none;
36
  padding: 10px 0;
37
  border-bottom: solid 1px #1abc9c;
38
  -webkit-transition: all 0.3s cubic-bezier(0.64, 0.09, 0.08, 1);
39
          transition: all 0.3s cubic-bezier(0.64, 0.09, 0.08, 1);
40
  background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0) 96%, #1abc9c 4%);
41
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 96%, #1abc9c 4%);
42
  background-position: -200px 0;
43
  background-size: 200px 100%;
44
  background-repeat: no-repeat;
45
  color: #0e6252;
46
}
47
input:focus, input:valid {
48
  box-shadow: none;
49
  outline: none;
50
  background-position: 0 0;
51
}
52
input:focus::-webkit-input-placeholder, input:valid::-webkit-input-placeholder {
53
  color: #1abc9c;
54
  font-size: 11px;
55
  -webkit-transform: translateY(-20px);
56
          transform: translateY(-20px);
57
  visibility: visible !important;
58
}
59
 
60
button {
61
  border: none;
62
  background: #1abc9c;
63
  cursor: pointer;
64
  border-radius: 3px;
65
  padding: 6px;
66
  width: 200px;
67
  color: white;
68
  margin-left: 25px;
69
  box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.2);
70
}
71
button:hover {
72
  -webkit-transform: translateY(-3px);
73
      -ms-transform: translateY(-3px);
74
          transform: translateY(-3px);
75
  box-shadow: 0 6px 6px 0 rgba(0, 0, 0, 0.2);
76
}
77
 
 

Material Design Input Text

CSSDeck G+