Howto faire une zone HTML avec l'ombre et pressable

Question

Je voudrais faire un widget HTML comme celui-ci: https://jsfiddle.net/api/mdn/

.simple { 
    box-shadow: 5px 5px 5px rgba(0,0,0,0.7); 
} 

Mais je voudrais que ce soit pressable pour qu'il aplatit pour 1 seconde et réoriente à une URL différente.

Edit:

J'ai essayé les éléments suivants:

button { 
    width: 150px; 
    font-size: 1.1rem; 
    line-height: 2; 
    border-radius: 10px; 
    border: none; 
    background-image: linear-gradient(to bottom right, #777, #ddd); 
    box-shadow: 5px 5px 5px rgba(0,0,0,0.7); 
} 

button:focus, button:hover { 
    background-image: linear-gradient(to bottom right, #888, #eee); 
} 

button:active { 
    box-shadow: inset 2px 2px 1px black, 
       inset 2px 3px 5px rgba(0,0,0,0.3), 
       inset -2px -3px 5px rgba(255,255,255,0.5); 
} 

<button>Press me!</button> 

https://jsfiddle.net/z7a0v8uv/

Mais je ne sais pas comment traduire le contenu du bouton pour la faire ressembler à c'est être appuyé.

Answer 1

Je trouve une réponse ici: https://www.w3schools.com/howto/howto_css_animate_buttons.asp

que je recherchais:

translateX(...) translateY(...) 

Comme on peut le voir dans cet exemple de travail:

https://jsfiddle.net/z7a0v8uv/1/

Maintenant, j'ai juste besoin intégrer cela avec le bon style.

Edit:

Voici le code CSS complet:

button { 
    width: 100%; 
    border: none; 
    box-shadow: 5px 5px 5px rgba(0,0,0,0.7); 
} 

button:focus, button:hover { 
    background-image: linear-gradient(to bottom right, #888, #eee); 
} 

button:active { 
    box-shadow: 2px 2px 2px rgba(0,0,0,0.7); 
    transform: translateY(3px) translateX(3px); 
}