CSS: diseñó una checkbox para que parezca un botón, ¿hay un elemento emergente?

He creado un botón de aspecto pequeño para mostrar en lugar de una checkbox. Me preguntaba si también había una manera de tener un: hover look de alguna manera? Gracias

http://jsfiddle.net/zAFND/2/

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

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

parece que necesita una regla muy similar a su regla de verificación

http://jsfiddle.net/VWBN4/3

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

y para pasar el cursor y hacer clic en el estado:

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

el orden es importante sin embargo.

Haz lo que Kelly dijo …

PERO. En lugar de tener la input posicionada de forma absoluta y superior a -20px (simplemente ocultándola de la página), haga que el cuadro de entrada quede oculto.

ejemplo:

  

Funciona mejor y puede colocarlo en cualquier lugar de la página.

Haga esto para un border fresco y efecto de font :

 #ck-button:hover { /*ADD :hover */ margin:4px; background-color:#EFEFEF; border-radius:4px; border:1px solid red; /*change border color*/ overflow:auto; float:left; color:red; /*add font color*/ } 

Ejemplo: http://jsfiddle.net/zAFND/6/