dark css controls

dark css3 controls

by voodoomonkey

HTML

<div class="darkbutton">
    <p class="btntext">Bla</p>
</div>
<br>
<br>
<input type="checkbox" unchecked/>
<br>
<input type="checkbox" checked/>

CSS

body {
    padding:2em;
    background-color:#44403f;
}
div.darkbutton {
    text-align: center;
    height: 2em;
    width: 6em;
    line-height: 2em;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    background-color: #44403f;
    -webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, .4), inset 0 1px rgba(102, 96, 95, .8);
    -moz-box-shadow: 0 2px 4px rgba(0, 0, 0, .4), inset 0 1px rgba(102, 96, 95, .8);
    box-shadow: 0 2px 4px rgba(0, 0, 0, .4), inset 0 1px rgba(102, 96, 95, .8);
    border: solid 1px #000;
    background-image: -webkit-linear-gradient(bottom, rgba(68, 64, 63, .1), rgba(102, 96, 95, .1) 73%);
    background-image: -moz-linear-gradient(bottom, rgba(68, 64, 63, .1), rgba(102, 96, 95, .1) 73%);
    background-image: -o-linear-gradient(bottom, rgba(68, 64, 63, .1), rgba(102, 96, 95, .1) 73%);
    background-image: -ms-linear-gradient(bottom, rgba(68, 64, 63, .1), rgba(102, 96, 95, .1) 73%);
    background-image: linear-gradient(to top, rgba(68, 64, 63, .1), rgba(102, 96, 95, .1) 73%);
}
.btntext {
    font-family:Arial;
    font-size:1em;
    font-weight: bold;
    color: #f3f1f0;
    text-shadow: 0 -1px rgba(0, 0, 0, 1);
}
div.darkbutton:hover {
    cursor:pointer;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    background-color: #44403f;
    -webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, .36), inset 0 1px rgba(118, 110, 109, .79);
    -moz-box-shadow: 0 2px 4px rgba(0, 0, 0, .36), inset 0 1px rgba(118, 110, 109, .79);
    box-shadow: 0 2px 4px rgba(0, 0, 0, .36), inset 0 1px rgba(118, 110, 109, .79);
    border: solid 1px #000;
    background-image: -webkit-linear-gradient(bottom, rgba(68, 64, 63, .1), rgba(102, 96, 95, .1) 73%);
    background-image: -moz-linear-gradient(bottom, rgba(68, 64, 63, .1), rgba(102, 96, 95, .1) 73%);
    background-image: -o-linear-gradient(bottom, rgba(68, 64, 63, .1), rgba(102, 96, 95, .1) 73%);
    background-image: -ms-linear-gradient(bottom,...