CSS: styled a checkbox to look like a button, is there a hover?

#ck-button:hover {
    background:red;
}

Fiddle: http://jsfiddle.net/zAFND/4/

it looks like you need a rule very similar to your checked rule

http://jsfiddle.net/VWBN4/3

#ck-button input:hover + span {
    background-color:#191;
    color:#fff;
}

and for hover and clicked state:

#ck-button input:checked:hover + span {
    background-color:#c11;
    color:#fff;
}

the order is important though.

Do what Kelly said...

BUT. Instead of having the input positioned absolute and top -20px (just hiding it off the page), make the input box hidden.

example:

<input type="checkbox" hidden>

Works better and can put it anywhere on the page.

Related