<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>
.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; }