Ajax Loader
×
HTML 
<h1>IOS<span>7</span> <span>switcher</span> style <span class="tw">2</span></h1>
1
<h1>IOS<span>7</span> <span>switcher</span> style <span class="tw">2</span></h1>
2
<h6>Use chrome for best experience</h6>
3
<div id="content">
4
  <input type="checkbox" class="check" id="one" name="check_one" />
5
  <label for="one"><span id="thumb"></span>
6
    <span id="mention">Made by <a href="https://twitter.com/LukyVJ">LukyVj</a></span></label>
7
</div>  
8
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
 
CSS 
body {
1
body {
2
  background: #fafafa;
3
}
4
 
5
* {
6
  -webkit-box-sizing: border-box;
7
  -moz-box-sizing: border-box;
8
  -ms-box-sizing: border-box;
9
  box-sizing: border-box;
10
  font-family: helvetica Neue;
11
  font-weight: 100;
12
  text-align: center;
13
  -webkit-font-smoothing: antialiased;
14
}
15
 
16
::selection {
17
  background: transparent;
18
}
19
 
20
p {
21
  text-align: center;
22
}
23
 
24
h1 {
25
  font-size: 3.4em;
26
}
27
 
28
h1 span:first-child {
29
  font-size: 1.3em;
30
 
31
  background: -webkit-linear-gradient(-65deg, #25d38b 0%, #25d38b 20%, #1142cd 44%, #0b8cea 49%, #d83dbd 74%, #db315e 100%);
32
  background: -moz-linear-gradient(-65deg, #25d38b 0%, #25d38b 20%, #1142cd 44%, #0b8cea 49%, #d83dbd 74%, #db315e 100%);
33
  background: -o-linear-gradient(-65deg, #25d38b 0%, #25d38b 20%, #1142cd 44%, #0b8cea 49%, #d83dbd 74%, #db315e 100%);
34
  background: -ms-linear-gradient(-65deg, #25d38b 0%, #25d38b 20%, #1142cd 44%, #0b8cea 49%, #d83dbd 74%, #db315e 100%);
35
  background: linear-gradient(-65deg, #25d38b 0%, #25d38b 20%, #1142cd 44%, #0b8cea 49%, #d83dbd 74%, #db315e 100%);
36
 
37
  -webkit-background-size: 35px;
38
  -moz-background-size: 35px;
39
 
40
  background-size: 35px; /*background-clip*/
41
-webkit-background-clip: text;
42
  -webkit-text-fill-color: transparent;
43
}
44
 
45
#content {
46
  width: 50px;
47
  margin: 180px auto;
48
}
49
 
50
.tw {
51
  display: inline-block;
52
  width: 20px;
53
  float: right;
54
  height: 20px;
55
  background: #ff5c5c;
56
  font-size: .3em;
57
  font-weight: 300;
58
  border-radius: 20px;
59
  color: #fff;
60
  position: absolute;
61
  margin: 20px 0;
62
}
63
 
64
label:before {
65
  content: '';
66
  display: block;
67
  width: 50px;
68
 
69
  height: 30px; /*border-radius*/
70
-webkit-border-radius: 100px;
71
  border: 1px solid #ccc; /*box-shadow*/
72
 
73
-webkit-box-shadow: inset 0 4px 0px rgba(0,0,0,.05), 0 0px 1px rgba(255,255,255,.8),0 1px 2px #fff;
74
  box-shadow: inset 0 4px 0px rgba(0,0,0,.05), 0 0px 1px rgba(255,255,255,.8),0 1px 2px #fff;
75
  position: relative;
76
  z-index: -1;
77
  padding: 1px;
78
}
79
 
80
label:before {
81
  background: #fff; /*box-shadow*/
82
 
83
-webkit-box-shadow: inset 0 0 0 0px #ccc;
84
  box-shadow: inset 0 0 0 0px #ccc;
85
}
86
 
87
#one:checked ~ label[for=one]:before {
88
  background: #fff; /*box-shadow*/
89
 
90
-webkit-box-shadow: inset 0 0 0 10px #ccc;
91
  box-shadow: inset 0 0 0 10px #ccc;
92
}
93
 
94
#one:checked ~ label[for=one].on:before {
95
  background: #4bd663; /*box-shadow*/
96
 
97
-webkit-box-shadow: inset 0 0 0 10px #4bd663;
98
  box-shadow: inset 0 0 0 10px #4bd663;
99
}
100
 
101
#two:checked ~ label[for=two]:before {
102
  background: #fff; /*box-shadow*/
103
 
104
-webkit-box-shadow: inset 0 0 0 10px #ccc;
105
  box-shadow: inset 0 0 0 10px #ccc;
106
}
107
 
108
#two:checked ~ label[for=two].on:before {
109
  background: #4bd663; /*box-shadow*/
110
 
111
-webkit-box-shadow: inset 0 0 0 10px #4bd663;
112
  box-shadow: inset 0 0 0 10px #4bd663;
113
}
114
 
115
/* 1 -Hide the inputs */
116
input[type=checkbox] {
117
  display: none;
118
}
119
 
120
/* 2 -Prepare labels */
121
#thumb {
122
  content: '';
123
  height: 28px;
124
  display: block;
125
  float: left;
126
  width: 28px;
127
  padding: 0px;
128
 
129
  margin: -31px 3px; /*border-radius*/
130
-webkit-border-radius: 100px; /*linear-gradient*/
131
background: -webkit-gradient(linear,left top,left bottom,from(#fff),to(#f5f5f5)); /*box-shadow*/
132
 
133
-webkit-box-shadow: 0 0 0 1px rgba(0,0,0,.1), 0 4px 5px rgba(0,0,0,.1),inset 0 -3px 3px hsla(0,0%,0%,.025), 0 1px 4px hsla(0,0%,0%,.15), 0 4px 4px hsla(0,0%,0%,.1);
134
  box-shadow: 0 0 0 1px rgba(0,0,0,.1), 0 4px 5px rgba(0,0,0,.1),inset 0 -3px 3px hsla(0,0%,0%,.025), 0 1px 4px hsla(0,0%,0%,.15), 0 4px 4px hsla(0,0%,0%,.1);
135
  position: absolute;
136
  z-index: 1;
137
}
138
 
139
/* 3 -Prepare the fonts ? */
140
label {
141
  display: block;
142
  margin: 8px 0;
143
}
144
 
145
/* Now, make it move */
146
#one:checked ~ label[for=one] #thumb {
147
  margin: -31px 23px; /*transition*/
148
 
149
-webkit-transition: margin .2s ease .2s;
150
  -moz-transition: margin .2s ease .2s;
151
  -o-transition: margin .2s ease .2s;
152
  -ms-transition: margin .2s ease .2s;
153
  transition: margin .2s ease .2s;
154
}
155
 
156
label:before,#thumb,#one:checked ~ label[for=one]:before {
157
  /*transition*/
158
 
159
-webkit-transition: all .2s ease, box-shadow .2s ease .1s;
160
  -moz-transition: all .2s ease, box-shadow .2s ease .1s;
161
  -o-transition: all .2s ease, box-shadow .2s ease .1s;
162
  -ms-transition: all .2s ease, box-shadow .2s ease .1s;
163
  transition: all .2s ease, box-shadow .2s ease .1s;
164
}
165
 
166
/*special*/
167
a {
168
  color: transparent;
169
  text-decoration: none;
170
}
171
 
172
label span#mention {
173
  position: absolute;
174
  font-size: 1.5em;
175
  left: 0;
176
  right: 0;
177
  top: 70%;
178
  color: transparent; /*transition*/
179
 
180
-webkit-transition: all .2s ease .3s;
181
  -moz-transition: all .2s ease .3s;
182
  -o-transition: all .2s ease .3s;
183
  -ms-transition: all .2s ease .3s;
184
  transition: all .2s ease .3s;
185
}
186
 
187
#one:checked ~ label[for=one] span,#one:checked ~ label[for=one] span a {
188
  color: #000 !important; /*transition*/
189
 
190
-webkit-transition: all .2s ease .3s;
191
  -moz-transition: all .2s ease .3s;
192
  -o-transition: all .2s ease .3s;
193
  -ms-transition: all .2s ease .3s;
194
  transition: all .2s ease .3s;
195
}
196
 
197
#one:checked ~ label[for=one] span a {
198
  background: -webkit-linear-gradient(-65deg, #25d38b 0%, #25d38b 20%, #1142cd 44%, #0b8cea 49%, #d83dbd 74%, #db315e 100%);
199
  background: -moz-linear-gradient(-65deg, #25d38b 0%, #25d38b 20%, #1142cd 44%, #0b8cea 49%, #d83dbd 74%, #db315e 100%);
200
  background: -o-linear-gradient(-65deg, #25d38b 0%, #25d38b 20%, #1142cd 44%, #0b8cea 49%, #d83dbd 74%, #db315e 100%);
201
  background: -ms-linear-gradient(-65deg, #25d38b 0%, #25d38b 20%, #1142cd 44%, #0b8cea 49%, #d83dbd 74%, #db315e 100%);
202
  background: linear-gradient(-65deg, #25d38b 0%, #25d38b 20%, #1142cd 44%, #0b8cea 49%, #d83dbd 74%, #db315e 100%);
203
 
204
  -webkit-background-size: 35px;
205
  -moz-background-size: 35px;
206
 
207
  background-size: 35px; /*background-clip*/
208
-webkit-background-clip: text;
209
  -webkit-text-fill-color: transparent;
210
}
211
 
212
#one:checked ~ label[for=one] span a:hover {
213
  border-bottom: 1px dotted #000;
214
  padding-bottom: 5px; /*transition*/
215
 
216
-webkit-transition: all 0s ease;
217
  -moz-transition: all 0s ease;
218
  -o-transition: all 0s ease;
219
  -ms-transition: all 0s ease;
220
  transition: all 0s ease;
221
}
222
 
223
/* Add some transitions, which is a kind of reproduction of the effect when you maintain an IOS7 switcher pressed */
224
#thumb:hover {
225
  width: 36px;
226
}
227
 
228
#one:checked ~ label[for=one] #thumb {
229
  width: 28px;
230
}
231
 
232
#one:checked ~ label[for=one] #thumb:hover {
233
  width: 36px;
234
  margin-left: 16px !important;
235
 
236
  -webkit-transition: all .2s ease;
237
  -moz-transition: all .2s ease;
238
  -o-transition: all .2s ease;
239
  -ms-transition: all .2s ease;
240
  transition: all .2s ease;
241
}
242
 
243
#one:checked ~ label[for=one] #thumb:not(:hover) {
244
  -webkit-transition: all .3s ease;
245
  -moz-transition: all .3s ease;
246
  -o-transition: all .3s ease;
247
  -ms-transition: all .3s ease;
248
  transition: all .3s ease;
249
}
250
 
 
JavaScript 
//Big thanks to Kushagra
1
//Big thanks to Kushagra
2
$("#one").change(function(){
3
  var ele = $('#one').next('label[for="one"]');
4
  setTimeout(function() {
5
    if(ele.hasClass("on"))
6
      ele.removeClass("on");
7
    else
8
      ele.addClass("on");
9
  }, 200)
10
});
 

Untitled

CSSDeck G+