Ajax Loader
×

block checkbox

This is a checkbox version of blob-button: http://cssdeck.com/labs/blob-button made without javascript

HTML 
 
1
 
2
 
3
<h2><strong>Checkbox</strong> fork of button inspired by this <a href=
4
    "http://dribbble.com/shots/1116676-PSD-Button">dribbble shot</a></h2>
5
 
6
<input type="checkbox" id="btn"/>
7
<label for="btn"></label>
 
CSS 
body { margin-top: 20px; background: #242527; }
1
body { margin-top: 20px; background: #242527; }
2
a { text-decoration: none; color: #EC5C93; }
3
h2 {
4
  text-align: center;
5
  margin-bottom: 60px;
6
  color: #666; color: rgba(255,255,255,0.3);
7
}
8
input#btn {
9
  display: none;
10
}
11
 
12
input + label {
13
  display: inline-block;
14
}
15
 
16
input + label {
17
  -webkit-animation: uncheck 1s linear;
18
  -moz-animation:    uncheck 1s linear;
19
  -o-animation:      uncheck 1s linear;
20
  animation:         uncheck 1s linear;
21
}
22
input + label:before {
23
  -webkit-animation: uncheck 1s linear, redglow 5s ease infinite;
24
  -moz-animation:    uncheck 1s linear, redglow 5s ease infinite;
25
  -o-animation:      uncheck 1s linear, redglow 5s ease infinite;
26
  animation:         uncheck 1s linear, redglow 5s ease infinite;
27
}
28
 
29
input + label:after {
30
  color: rgba(25,0,0,0.7);
31
  text-shadow: 1px 1px 0px rgba(255,255,255,0.15);
32
  content: '✗';
33
}
34
input + label {
35
  left: 45%;
36
  position: absolute;
37
  cursor: pointer;
38
  width: 140px;
39
  height: 140px;
40
  line-height: 140px;
41
  background: #25292C;
42
  margin: 0px auto;
43
  text-align: center;
44
  border-radius: 999px;
45
  font-size: 5em;
46
  font-family: sans-serif;
47
  -webkit-transition: 0.1s ease-out;
48
  -moz-transition:    0.1s ease-out;
49
  -o-transition:      0.1s ease-out;
50
  transition:         0.1s ease-out;
51
52
53
  box-shadow: inset 1px 1px 2px rgba(255,255,255,0.3),
54
              inset 3px 15px 45px rgba(255,255,255,0.1),
55
              inset -1px -1px 2px rgba(0,0,0,0.5),
56
              inset -3px -15px 45px rgba(0,0,0,0.2),
57
              1px 5px 30px -4px rgba(0,0,0,1);
58
}
59
 
60
input + label:before {
61
  content: "";
62
  background: #1F1A1A;
63
  width: 170px;
64
  height: 170px;
65
  position: absolute;
66
  left: -15px;
67
  top: -15px;
68
  z-index: -1;
69
  border-radius: 999px;
70
  box-shadow: inset -1px -1px 2px rgba(255,255,255,0.3),
71
    inset -5px -15px 40px rgba(255,255,255,0.1),
72
    inset 1px 1px 2px rgba(0,0,0,0.5),
73
    inset 5px 15px 40px rgba(0,0,0,0.2),
74
    -2px -40px 50px -20px rgba(255,255,255,0.1),
75
    2px 35px 50px -10px rgba(0,0,0,0.4),
76
    0px 0px 25px 8px rgba(60,60,60,1);
77
}
78
 
79
input:checked + label:before {
80
  background: #1A1F1A;
81
}
82
 
83
input:checked + label:active {
84
  color: rgba(155,155,155,1);
85
  text-shadow: -1px -1px 0px rgba(255,255,255,0.8), 1px 1px 2px rgba(0,0,0,1);
86
87
  box-shadow: inset 1px 1px 2px rgba(255,255,255,0.3),
88
              inset 3px 15px 45px rgba(0,0,0,0.2),
89
              inset -1px -1px 2px rgba(0,0,0,0.5),
90
              inset -3px -15px 45px rgba(255,255,255,0.1),
91
              1px 5px 10px -4px rgba(0,0,0,1);
92
}
93
 
94
input:checked + label {
95
  -webkit-animation: check 1s linear;
96
  -moz-animation:    check 1s linear;
97
  -o-animation:      check 1s linear;
98
  animation:         check 1s linear;
99
}
100
input:checked + label:before {
101
  -webkit-animation: check 1s linear, greenglow 5s ease infinite;
102
  -moz-animation:    check 1s linear, greenglow 5s ease infinite;
103
  -o-animation:      check 1s linear, greenglow 5s ease infinite;
104
  animation:         check 1s linear, greenglow 5s ease infinite;
105
}
106
 
107
input:checked + label:after {
108
  /*color: rgba(155,161,155,1);*/
109
  color: rgba(0,32,0,.8);
110
  text-shadow: -1px -1px 0px rgba(255,255,255,0.8), 1px 1px 2px rgba(0,0,0,1);
111
  content: '✓';
112
}
113
input:checked + label {
114
115
  box-shadow: inset 1px 1px 2px rgba(255,255,255,0.3),
116
              inset 3px 15px 45px rgba(0,0,0,0.2),
117
              inset -1px -1px 2px rgba(0,0,0,0.5),
118
              inset -3px -15px 45px rgba(255,255,255,0.1),
119
              1px 5px 10px -4px rgba(0,0,0,1);
120
}
121
 
122
@-webkit-keyframes check {
123
  0%   { border-radius: 999px 999px; }
124
  5%   { border-radius: 999px 200px; }
125
  22%  { border-radius: 400px 999px; }
126
  34%  { border-radius: 999px 700px; }
127
  48%  { border-radius: 700px 999px; }
128
  70%  { border-radius: 999px 999px; }
129
  85%  { border-radius: 850px 999px; }
130
  100% { border-radius: 999px 999px; }
131
}
132
@-moz-keyframes    check {
133
  0%   { border-radius: 999px 999px; }
134
  5%   { border-radius: 999px 200px; }
135
  22%  { border-radius: 400px 999px; }
136
  34%  { border-radius: 999px 700px; }
137
  48%  { border-radius: 700px 999px; }
138
  70%  { border-radius: 999px 999px; }
139
  85%  { border-radius: 850px 999px; }
140
  100% { border-radius: 999px 999px; }
141
}
142
@-o-keyframes      check {
143
  0%   { border-radius: 999px 999px; }
144
  5%   { border-radius: 999px 200px; }
145
  22%  { border-radius: 400px 999px; }
146
  34%  { border-radius: 999px 700px; }
147
  48%  { border-radius: 700px 999px; }
148
  70%  { border-radius: 999px 999px; }
149
  85%  { border-radius: 850px 999px; }
150
  100% { border-radius: 999px 999px; }
151
}
152
@keyframes         check {
153
  0%   { border-radius: 999px 999px; }
154
  5%   { border-radius: 999px 200px; }
155
  22%  { border-radius: 400px 999px; }
156
  34%  { border-radius: 999px 700px; }
157
  48%  { border-radius: 700px 999px; }
158
  70%  { border-radius: 999px 999px; }
159
  85%  { border-radius: 850px 999px; }
160
  100% { border-radius: 999px 999px; }
161
}
162
 
163
/**********/
164
 
165
 
166
@-webkit-keyframes uncheck {
167
  0%   { border-radius: 999px 999px; }
168
  5%   { border-radius: 200px 999px; }
169
  22%  { border-radius: 999px 400px; }
170
  34%  { border-radius: 700px 999px; }
171
  48%  { border-radius: 999px 700px; }
172
  70%  { border-radius: 999px 999px; }
173
  85%  { border-radius: 999px 850px; }
174
  100% { border-radius: 999px 999px; }
175
}
176
@-moz-keyframes    uncheck {
177
  0%   { border-radius: 999px 999px; }
178
  5%   { border-radius: 200px 999px; }
179
  22%  { border-radius: 999px 400px; }
180
  34%  { border-radius: 700px 999px; }
181
  48%  { border-radius: 999px 700px; }
182
  70%  { border-radius: 999px 999px; }
183
  85%  { border-radius: 999px 850px; }
184
  100% { border-radius: 999px 999px; }
185
}
186
@-o-keyframes      uncheck {
187
  0%   { border-radius: 999px 999px; }
188
  5%   { border-radius: 200px 999px; }
189
  22%  { border-radius: 999px 400px; }
190
  34%  { border-radius: 700px 999px; }
191
  48%  { border-radius: 999px 700px; }
192
  70%  { border-radius: 999px 999px; }
193
  85%  { border-radius: 999px 850px; }
194
  100% { border-radius: 999px 999px; }
195
}
196
@keyframes         uncheck {
197
  0%   { border-radius: 999px 999px; }
198
  5%   { border-radius: 200px 999px; }
199
  22%  { border-radius: 999px 400px; }
200
  34%  { border-radius: 700px 999px; }
201
  48%  { border-radius: 999px 700px; }
202
  70%  { border-radius: 999px 999px; }
203
  85%  { border-radius: 999px 850px; }
204
  100% { border-radius: 999px 999px; }
205
}
206
 
207
 
208
@-webkit-keyframes redglow {
209
  0% { background-color: #1A1A1A; }
210
  45% {background-color: #2F1A1A; }
211
  55% {background-color: #2F1A1A; }
212
  100% {background-color: #1A1A1A; }
213
}
214
@-moz-keyframes redglow {
215
  0% { background-color: #1A1A1A; }
216
  45% {background-color: #2F1A1A; }
217
  55% {background-color: #2F1A1A; }
218
  100% {background-color: #1A1A1A; }
219
}
220
@-o-keyframes redglow {
221
  0% { background-color: #1A1A1A; }
222
  45% {background-color: #2F1A1A; }
223
  55% {background-color: #2F1A1A; }
224
  100% {background-color: #1A1A1A; }
225
}
226
@keyframes redglow {
227
  0% { background-color: #1A1A1A; }
228
  45% {background-color: #2F1A1A; }
229
  55% {background-color: #2F1A1A; }
230
  100% {background-color: #1A1A1A; }
231
}
232
 
233
 
234
@-webkit-keyframes greenglow {
235
  0% { background-color: #1A1A1A; }
236
  45% {background-color: #1A2F1A; }
237
  55% {background-color: #1A2F1A; }
238
  100% {background-color: #1A1A1A; }
239
}
240
@-moz-keyframes greenglow {
241
  0% { background-color: #1A1A1A; }
242
  45% {background-color: #1A2F1A; }
243
  55% {background-color: #1A2F1A; }
244
  100% {background-color: #1A1A1A; }
245
}
246
@-o-keyframes greenglow {
247
  0% { background-color: #1A1A1A; }
248
  45% {background-color: #1A2F1A; }
249
  55% {background-color: #1A2F1A; }
250
  100% {background-color: #1A1A1A; }
251
}
252
@keyframes greenglow {
253
  0% { background-color: #1A1A1A; }
254
  45% {background-color: #1A2F1A; }
255
  55% {background-color: #1A2F1A; }
256
  100% {background-color: #1A1A1A; }
257
}
 

block checkbox

CSSDeck G+