pulsante CSS premendo effetto

Question

Ho un pulsante con un box-shadow che la fa apparire come se fosse galleggiante, e vorrei fare un effetto premendo quando faccio clic su di esso:

Codice (CSS):

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

codice (HTML):

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

Screenshot:

Answer 1

Utilizzare la pseudo classe :active e modificare il valore di offset verticale casella-ombra. Regolare il valore top per l'elemento attivato rispetto all'ingresso relativo posizionato con padre assoluto.

.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

se il buttoms hanno un altezza fissa (come sembra) Vorrei avvolgere il buttom in un div con quella altezza e impostare il pulsante per posizione assoluta per creare il giusto effetto (in movimento verso il basso) con:

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

JSFIDDLE

Answer 3

È possibile utilizzare la proprietà CSS hover:

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

Un'altra opzione è quella di utilizzare i generatori pulsante mi piace buttongarage.in per generare il codice per il pulsante e l'effetto hover.