Toggle button

by ginpei

HTML

<p>
    <label class="showy"><input type="checkbox" checked><span>Label</span></label>
    <label class="showy"><input type="checkbox"><span>Label</span></label>
    <label class="showy"><input type="checkbox"><span>Label</span></label>
</p>

CSS

.showy [type=checkbox] {
    display: none;
}
.showy [type=checkbox] + span {
    background-color: #f9f9f9;
    border: solid 1px #666;
    border-radius: 4px;
    cursor: pointer;
    display: inline-block;
    -ms-user-select: none;
    -moz-user-select: none;
    -o-user-select: none;
    -webkit-user-select: none;
    user-select: none;
    vertical-align: bottom;

    box-shadow:
         1px  1px 2px #fff inset,
        -1px -1px 2px #ccc inset;
    padding: 4px;
}
.showy [type=checkbox]:checked + span {
    box-shadow:
        -1px -1px 2px #fff inset,
         1px  1px 2px #999 inset;
    padding: 5px 3px 3px 5px;
}
.showy:active [type=checkbox] + span {
    box-shadow:
        -1px -1px 3px #fff inset,
         1px  1px 3px #666 inset;
    padding: 6px 2px 2px 6px;
}