input[type="checkbox"] {
position: absolute;
clip: rect(0,0,0,0);
}

input[type="checkbox"] + label {
display: inline-block;
padding: .35em .5em .2em;
background: #ccc;
background-image: linear-gradient(#ddd, #bbb);
border: 1px solid rgba(0,0,0,.2);
border-radius: .3em;
box-shadow: 0 1px white inset;
text-align: center;
text-shadow: 0 1px 1px white;
cursor: pointer;
}

input[type="checkbox"]:checked + label,
input[type="checkbox"]:active + label {
box-shadow: .04em .1em .2em rgba(0,0,0,.6) inset;
border-color: rgba(0,0,0,.3);
background: #bbb;
}

body { font: 150%/1.6 sans-serif; }