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