Css बटन दबाने प्रभाव

Question

मैं एक बॉक्स के छाया करता है कि ऐसा लगता है कि यह चल रहा है देखने वाला कोई बटन है, और मैं एक दबाने प्रभाव बनाने के लिए जब मैं उस पर क्लिक करें चाहते हैं:

कोड (सीएसएस):

#startBtn 
{ 
    font-family: OpenSans; 
    color: #FFFFFF; 
    background-color: #00FF7C; 
    border: 1px solid #00FF7C; 
    border-radius: 5px; 
    box-shadow: 0px 5px 0px #00823F; 
} 

कोड (एचटीएमएल):

<input type="button" id="startBtn" value="Let's begin"> 

स्क्रीनशॉट:

Answer 1

:active छद्म वर्ग का उपयोग करें और बॉक्स-छाया वर्टिकल ऑफ़सेट मान बदलें। पूर्ण माता-पिता के साथ अपेक्षाकृत स्थानांतरित इनपुट के संबंध में सक्रिय तत्व के लिए top मान समायोजित करें।

.button { 
 
    position: absolute; 
 
} 
 
#startBtn { 
 
    font-family: OpenSans; 
 
    color: #FFFFFF; 
 
    background-color: #00FF7C; 
 
    border: 1px solid #00FF7C; 
 
    border-radius: 5px; 
 
    box-shadow: 0px 5px 0px #00823F; 
 
    position: relative; 
 
    top: 0px; 
 
    transition: all ease 0.3s; 
 
} 
 
#startBtn:active { 
 
    box-shadow: 0 3px 0 #00823F; 
 
    top: 3px; 
 
}

<div class="button"> 
 
    <input type="button" id="startBtn" value="Let's begin"> 
 
</div>

Answer 2

यदि buttoms (के रूप में यह लग रहा है) एक निश्चित ऊंचाई है मुझे लगता है कि ऊंचाई के साथ एक div में स्थित बटन पर लपेट और सही प्रभाव पैदा करने के लिए पूर्ण स्थिति के लिए बटन सेट (चलती हैं यह नीचे) के साथ:

#startBtn:active { 
    box-shadow: 0 1px 0 #00823F; 
    bottom:-4px; 
} 

JSFIDDLE

Answer 3

आप सीएसएस hover संपत्ति का उपयोग कर सकते हैं:

#startBtn:hover { 
    /* your css code here */ 
} 

एक अन्य विकल्प buttongarage.in की तरह बटन जनरेटर का उपयोग करने के लिए बटन और मंडराना प्रभाव के लिए अपने कोड उत्पन्न करने के लिए है।