Я много исследовал, и я нашел этот JSFiddle выглядит так, как мне нужно, но когда я нажимаю кнопку, фон страницы меняется. Я хочу, чтобы цвет кнопки был изменен при нажатии.
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;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
input[type="checkbox"]{
display: none;
}
input[type="checkbox"]:checked + div{
background: #5BC0DE;
}
label + input[type="checkbox"]:checked{
background: #000;
}
<link href="#" onclick="location.href='http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css'; return false;" rel="stylesheet"/>
<label for="check" class="btn btn-default">Toggle background colour</label>
<input type="checkbox" id="check" />
<div></div>