Efecto de presionar el botón Css

Tengo un botón con una sombra de caja que lo hace parecer flotante, y me gustaría hacer un efecto de presión cuando hago clic en él:

Código (CSS):

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

Código (HTML):

  

Captura de pantalla:

Botón

Use :active pseudo clase :active y cambie el valor de desplazamiento vertical de sombreado de caja. Ajuste el valor top para el elemento activado con respecto a la entrada relativamente posicionada con el elemento primario absoluto.

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

SI los botones tienen una altura fija (como se ve), envolvería el botón en un div con esa altura y pondría el botón en posición absoluta para crear el efecto correcto (moviéndolo hacia abajo) con:

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

JSFIDDLE

Puede usar la propiedad de hover CSS:

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

Otra opción es usar generadores de botones como buttongarage.in para generar su código para el botón y el efecto de desplazamiento.