CSS: стилизовал флажок, чтобы он выглядел как кнопка, есть ли зависание?

Я создал небольшую кнопку для отображения вместо флажка. Мне было интересно, есть ли способ, как-то выглядеть: зависание? спасибо

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

Ответ 1

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

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

Ответ 2

похоже, что вам нужно правило, очень похожее на ваше проверенное правило

http://jsfiddle.net/VWBN4/3

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

и для зависания и щелчка:

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

порядок важен.

Ответ 3

Сделайте то, что сказал Келли...

НО. Вместо того, чтобы input располагал абсолютный и верхний -20px (просто скрывая его от страницы), сделайте окно ввода скрытым.

Пример:

<input type="checkbox" hidden>

Работает лучше и может помещать его в любом месте на странице.

Ответ 4

Сделайте это для эффекта border и 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*/
}

Пример: http://jsfiddle.net/zAFND/6/