Based on the fiddle I posted in the comments I’ve modified it very slightly to use the Bootstrap button CSS.
Just include Bootstrap’s CSS file then use the code below.
HTML
<label for="check" class="btn btn-default">Toggle background colour</label>
<input type="checkbox" id="check" />
<div></div>
CSS
div {
width: 100%;
height: 100%;
background: #5CB85C;
position: absolute;
top: 0;
left: 0;
z-index: 1;
}
label.btn {
position: absolute;
top: 10px;
left: 10px;
z-index: 2;
}
input[type="checkbox"]{
display: none;
}
input[type="checkbox"]:checked + div{
background: #5BC0DE;
}
This uses the adjacent sibling selector.
Here it is working: http://jsfiddle.net/eYgdm/ (I’ve added *-user-select: none;
to prevent selection of the label text but it’s not required for the label to work)
Browser support
Chrome, Firefox [Desktop & Mobile] (Gecko) ≥ 1.0, Internet Explorer ≥ 7, Opera ≥ 9 and Safari ≥ 3
References: Attribute selectors and Adjacent sibling selectors