block checkbox
This is a checkbox version of blob-button: http://cssdeck.com/labs/blob-button made without javascript
This is a checkbox version of blob-button: http://cssdeck.com/labs/blob-button made without javascript
<h2><strong>Checkbox</strong> fork of button inspired by this <a href=
"http://dribbble.com/shots/1116676-PSD-Button">dribbble shot</a></h2>
<input type="checkbox" id="btn"/>
<label for="btn"></label>
body { margin-top: 20px; background: #242527; }
body { margin-top: 20px; background: #242527; }
a { text-decoration: none; color: #EC5C93; }
h2 {
text-align: center;
margin-bottom: 60px;
color: #666; color: rgba(255,255,255,0.3);
}
input#btn {
display: none;
}
input + label {
display: inline-block;
}
input + label {
animation: uncheck 1s linear;
animation: uncheck 1s linear;
animation: uncheck 1s linear;
animation: uncheck 1s linear;
}
input + label:before {
animation: uncheck 1s linear, redglow 5s ease infinite;
animation: uncheck 1s linear, redglow 5s ease infinite;
animation: uncheck 1s linear, redglow 5s ease infinite;
animation: uncheck 1s linear, redglow 5s ease infinite;
}
input + label:after {
color: rgba(25,0,0,0.7);
text-shadow: 1px 1px 0px rgba(255,255,255,0.15);
content: '✗';
}
input + label {
left: 45%;
position: absolute;
cursor: pointer;
width: 140px;
height: 140px;
line-height: 140px;
background: #25292C;
margin: 0px auto;
text-align: center;
border-radius: 999px;
font-size: 5em;
font-family: sans-serif;
transition: 0.1s ease-out;
transition: 0.1s ease-out;
transition: 0.1s ease-out;
transition: 0.1s ease-out;
box-shadow: inset 1px 1px 2px rgba(255,255,255,0.3),
inset 3px 15px 45px rgba(255,255,255,0.1),
inset -1px -1px 2px rgba(0,0,0,0.5),
inset -3px -15px 45px rgba(0,0,0,0.2),
1px 5px 30px -4px rgba(0,0,0,1);
}
input + label:before {
content: "";
background: #1F1A1A;
width: 170px;
height: 170px;
position: absolute;
left: -15px;
top: -15px;
z-index: -1;
border-radius: 999px;
box-shadow: inset -1px -1px 2px rgba(255,255,255,0.3),
inset -5px -15px 40px rgba(255,255,255,0.1),
inset 1px 1px 2px rgba(0,0,0,0.5),
inset 5px 15px 40px rgba(0,0,0,0.2),
-2px -40px 50px -20px rgba(255,255,255,0.1),
2px 35px 50px -10px rgba(0,0,0,0.4),
0px 0px 25px 8px rgba(60,60,60,1);
}
input:checked + label:before {
background: #1A1F1A;
}
input:checked + label:active {
color: rgba(155,155,155,1);
text-shadow: -1px -1px 0px rgba(255,255,255,0.8), 1px 1px 2px rgba(0,0,0,1);
box-shadow: inset 1px 1px 2px rgba(255,255,255,0.3),
inset 3px 15px 45px rgba(0,0,0,0.2),
inset -1px -1px 2px rgba(0,0,0,0.5),
inset -3px -15px 45px rgba(255,255,255,0.1),
1px 5px 10px -4px rgba(0,0,0,1);
}
input:checked + label {
animation: check 1s linear;
animation: check 1s linear;
animation: check 1s linear;
animation: check 1s linear;
}
input:checked + label:before {
animation: check 1s linear, greenglow 5s ease infinite;
animation: check 1s linear, greenglow 5s ease infinite;
animation: check 1s linear, greenglow 5s ease infinite;
animation: check 1s linear, greenglow 5s ease infinite;
}
input:checked + label:after {
/*color: rgba(155,161,155,1);*/
color: rgba(0,32,0,.8);
text-shadow: -1px -1px 0px rgba(255,255,255,0.8), 1px 1px 2px rgba(0,0,0,1);
content: '✓';
}
input:checked + label {
box-shadow: inset 1px 1px 2px rgba(255,255,255,0.3),
inset 3px 15px 45px rgba(0,0,0,0.2),
inset -1px -1px 2px rgba(0,0,0,0.5),
inset -3px -15px 45px rgba(255,255,255,0.1),
1px 5px 10px -4px rgba(0,0,0,1);
}
@-webkit-keyframes check {
0% { border-radius: 999px 999px; }
5% { border-radius: 999px 200px; }
22% { border-radius: 400px 999px; }
34% { border-radius: 999px 700px; }
48% { border-radius: 700px 999px; }
70% { border-radius: 999px 999px; }
85% { border-radius: 850px 999px; }
100% { border-radius: 999px 999px; }
}
@-moz-keyframes check {
0% { border-radius: 999px 999px; }
5% { border-radius: 999px 200px; }
22% { border-radius: 400px 999px; }
34% { border-radius: 999px 700px; }
48% { border-radius: 700px 999px; }
70% { border-radius: 999px 999px; }
85% { border-radius: 850px 999px; }
100% { border-radius: 999px 999px; }
}
@-o-keyframes check {
0% { border-radius: 999px 999px; }
5% { border-radius: 999px 200px; }
22% { border-radius: 400px 999px; }
34% { border-radius: 999px 700px; }
48% { border-radius: 700px 999px; }
70% { border-radius: 999px 999px; }
85% { border-radius: 850px 999px; }
100% { border-radius: 999px 999px; }
}
@keyframes check {
0% { border-radius: 999px 999px; }
5% { border-radius: 999px 200px; }
22% { border-radius: 400px 999px; }
34% { border-radius: 999px 700px; }
48% { border-radius: 700px 999px; }
70% { border-radius: 999px 999px; }
85% { border-radius: 850px 999px; }
100% { border-radius: 999px 999px; }
}
/**********/
@-webkit-keyframes uncheck {
0% { border-radius: 999px 999px; }
5% { border-radius: 200px 999px; }
22% { border-radius: 999px 400px; }
34% { border-radius: 700px 999px; }
48% { border-radius: 999px 700px; }
70% { border-radius: 999px 999px; }
85% { border-radius: 999px 850px; }
100% { border-radius: 999px 999px; }
}
@-moz-keyframes uncheck {
0% { border-radius: 999px 999px; }
5% { border-radius: 200px 999px; }
22% { border-radius: 999px 400px; }
34% { border-radius: 700px 999px; }
48% { border-radius: 999px 700px; }
70% { border-radius: 999px 999px; }
85% { border-radius: 999px 850px; }
100% { border-radius: 999px 999px; }
}
@-o-keyframes uncheck {
0% { border-radius: 999px 999px; }
5% { border-radius: 200px 999px; }
22% { border-radius: 999px 400px; }
34% { border-radius: 700px 999px; }
48% { border-radius: 999px 700px; }
70% { border-radius: 999px 999px; }
85% { border-radius: 999px 850px; }
100% { border-radius: 999px 999px; }
}
@keyframes uncheck {
0% { border-radius: 999px 999px; }
5% { border-radius: 200px 999px; }
22% { border-radius: 999px 400px; }
34% { border-radius: 700px 999px; }
48% { border-radius: 999px 700px; }
70% { border-radius: 999px 999px; }
85% { border-radius: 999px 850px; }
100% { border-radius: 999px 999px; }
}
@-webkit-keyframes redglow {
0% { background-color: #1A1A1A; }
45% {background-color: #2F1A1A; }
55% {background-color: #2F1A1A; }
100% {background-color: #1A1A1A; }
}
@-moz-keyframes redglow {
0% { background-color: #1A1A1A; }
45% {background-color: #2F1A1A; }
55% {background-color: #2F1A1A; }
100% {background-color: #1A1A1A; }
}
@-o-keyframes redglow {
0% { background-color: #1A1A1A; }
45% {background-color: #2F1A1A; }
55% {background-color: #2F1A1A; }
100% {background-color: #1A1A1A; }
}
@keyframes redglow {
0% { background-color: #1A1A1A; }
45% {background-color: #2F1A1A; }
55% {background-color: #2F1A1A; }
100% {background-color: #1A1A1A; }
}
@-webkit-keyframes greenglow {
0% { background-color: #1A1A1A; }
45% {background-color: #1A2F1A; }
55% {background-color: #1A2F1A; }
100% {background-color: #1A1A1A; }
}
@-moz-keyframes greenglow {
0% { background-color: #1A1A1A; }
45% {background-color: #1A2F1A; }
55% {background-color: #1A2F1A; }
100% {background-color: #1A1A1A; }
}
@-o-keyframes greenglow {
0% { background-color: #1A1A1A; }
45% {background-color: #1A2F1A; }
55% {background-color: #1A2F1A; }
100% {background-color: #1A1A1A; }
}
@keyframes greenglow {
0% { background-color: #1A1A1A; }
45% {background-color: #1A2F1A; }
55% {background-color: #1A2F1A; }
100% {background-color: #1A1A1A; }
}