सीएसएस: एक बटन की तरह दिखने के लिए एक चेकबॉक्स स्टाइल, क्या कोई होवर है?

Question

मैंने चेकबॉक्स के बजाय प्रदर्शित करने के लिए एक छोटा सा दिखने वाला बटन बनाया है। मैं सोच रहा था कि क्या कोई तरीका है: होवर किसी भी तरह दिखता है? धन्यवाद

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

Answer 1

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

फिडल: http://jsfiddle.net/zAFND/4/

Answer 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; 
} 

हालांकि आदेश महत्वपूर्ण है।

Answer 3

एक शांत 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/

Answer 4

क्या केली ने कहा ...

लेकिन। input को पूर्ण और शीर्ष -20px (बस इसे पृष्ठ से छिपाएं) रखने के बजाय, इनपुट बॉक्स छुपाएं।

उदाहरण:

<input type="checkbox" hidden> 

वर्क्स बेहतर है और यह पृष्ठ पर कहीं भी रख सकते हैं।