Ajax Loader
HTML 
<div class="demo">
1
<div class="demo">
2
    <button >BUTTON</button>
3
    <input class="btn-b" type="button" value="button">
4
    <input class="btn-g" type="submit">
5
    <input class="btn-d" type="reset">
6
    <br><br>
7
    <input placeholder="Input" class="" type="text">
8
    <input placeholder="Input" class="inp-g" type="text">
9
    <input placeholder="Input" class="inp-r" type="text">
10
  </div>
 
CSS 
@import url(http://fonts.googleapis.com/css?family=Roboto+Condensed:700,400);
1
@import url(http://fonts.googleapis.com/css?family=Roboto+Condensed:700,400);
2
*{
3
  padding: 0;
4
  margin: 0;
5
}
6
html{
7
  height: 100%;
8
  overflow:hidden;
9
}
10
body{
11
  &:extend(html);
12
  background: linear-gradient(45deg, rgba(58, 200, 224, .1),rgba(20, 6, 96, .2)),linear-gradient(75deg, rgba(170, 251, 184, 0.2),rgba(117, 133, 52, 0.12)),linear-gradient(140deg,#FF9E3E,#EAD339);
13
  font-family: 'Roboto Condensed', sans-serif;
14
 
15
}
16
.demo>*{
17
  margin: 5px;
18
}
19
 
20
@c:#fff;
21
//@btn
22
@btn-r:#d2527f;
23
@btn-b:#6c7a89;
24
@btn-g:#87d37c;
25
@btn-d:#98d0c3;
26
@pd:1em;
27
 
28
 
29
.mix-btn(@btn:gold){
30
  background: @btn;
31
  border-bottom-color: darken(@btn,20);
32
 
33
  &:hover{
34
    background: lighten(@btn,5);
35
  }
36
  &:active{
37
    color: darken(@btn,20);
38
  }
39
}
40
 
41
button,
42
input[type=button],
43
input[type=submit],
44
input[type=reset]{
45
  border: none;
46
  outline: none;
47
 
48
  box-sizing: border-box;
49
  background: @btn-r;
50
  border-bottom: .3em solid darken(@btn-r,20);
51
  color: @c;
52
  padding: @pd @pd*2.5;
53
  border-radius: 10px;
54
  text-transform: uppercase;
55
  font-weight: 700;
56
  transition: all .06s;
57
 
58
 
59
 
60
  &:hover{
61
    background: lighten(@btn-r,5);
62
  }
63
  &:active{
64
    border-bottom-width: 0.12em;
65
    padding-bottom: ~'calc(1em + 0.18em)';
66
    color:  darken(@btn-r,20);
67
  }
68
}
69
 
70
button.btn-r,
71
input.btn-r{
72
  .mix-btn(@btn-r);
73
}
74
button.btn-b,
75
input.btn-b{
76
  .mix-btn(@btn-b);
77
}
78
button.btn-g,
79
input.btn-g{
80
  .mix-btn(@btn-g);
81
}
82
button.btn-d,
83
input.btn-d{
84
  .mix-btn(@btn-d);
85
}
86
// //////////////////////////////////////////////////////////
87
 
88
 
89
 
90
@snt:#f6f5f3;
91
@c-snt:#c4c0b7;
92
@g:#a2ded0;
93
@r:#f1a9a0;
94
@w:#fff;
95
 
96
 
97
input[type=text]{
98
  outline: none;
99
  border: 1px solid darken(@snt,5);
100
  border-right-color: transparent;
101
  border-bottom-color: transparent;
102
  border-radius: 10px;
103
  font-weight: 700;
104
 
105
  padding: 15px 20px;
106
  background: @snt;
107
  color: @c-snt;
108
  &::-webkit-input-placeholder{
109
    color: @c-snt;
110
  }
111
}
112
.mix-input(@color){
113
  background: @color;
114
  border-top-color: darken(@color,5);
115
  border-left-color: darken(@color,5);
116
  color: @w;
117
  &::-webkit-input-placeholder{
118
    color: @w;
119
  }
120
}
121
input[type=text].inp-g{
122
  .mix-input(@g);
123
}
124
input[type=text].inp-r{
125
  .mix-input(@r);
126
}
127
 
128
/////////////////////////////////////////////////////
129
// input[type="checkbox"]{
130
//  display: none;
131
// }
132
// input[type="checkbox"]:checked + label:before {
133
//  background-color: #a2ded0;
134
// }
135
// input[type="checkbox"] + label:before{
136
//  content: '';
137
//  display: inline-block;
138
//  color: transparent;
139
//  background-color: #f6f5f3;
140
//  width: 45px;
141
//  height: 45px;
142
//  border-radius: 10px;
143
//  text-align: center;
144
//  line-height: 32px;
145
//  margin-right: 5px;
146
//  font-size: 120%;
147
// }
 
JavaScript 
// src: https://dribbble.com/shots/1807337-Freebie-UI-3-365
1
// src: https://dribbble.com/shots/1807337-Freebie-UI-3-365
2
//
 

buttons and inputs flat style ui

CSSDeck G+