Nós criamos a aparência de um botão em seu estado normal, mas um botão 3D como esse está implorando por um estado “pressionado”. O que fazemos é adicionar uma cor mais escura ao botão em :hovere :focus. Em seguida, para :active(empurrado), removemos alguns dos se empurramos para box-shadowbaixo e para a direita com posicionamento relativo. É tão simples quanto isso, o botão agora tem uma experiência realmente óbvia e satisfatória quando você clica nele.
Aquilo que vem à mente: quando você ajusta o posicionamento relativo com valores superior / esquerdo / inferior / direito como esses, você deve ter cuidado no futuro se precisar posicionar absolutamente o elemento. Você pode ter alguns saltos loucos acontecendo, já que superior / esquerdo / inferior / direito significa algo muito diferente com o posicionamento absoluto do que com o posicionamento relativo.